在多个div中通过不同ID使用下拉菜单的最佳实践是什么

我有一个用户流,当我添加下拉菜单以添加删除,编辑帖子等内容时,只会在顶部帖子上打开一个div,因此我知道它必须由唯一的ID来完成。

也许有些javascript?这是我到目前为止的内容。

<div class="postdrop" id="postdrop'.$streamitem_data['streamitem_id'].'">
    <a class="postdrop_button postdrop_close" href="#">
         <span class="a rrow"></span>
    </a>
    <a class="postdrop_button postdrop_open"href="#postdrop">
         <span class="arrow"></span>
    </a>
    <ul class="postdrop_content">
        <li><a href="members.php">Edit</a></li>
        <li><a href="personalinformation.php">Privacy - </a></li>
        <li><a href="editinformation.php">Delete</a></li>
    </ul>
</div>

最佳答案

您可以使用纯CSS来做到这一点。

.postdrop_content {
    display:none;
}


然后,您可以在悬停事件上调用显示。

.postdrop_button.postdrop_open:hover + postdrop_content {
    display:block;
}


请注意,在这种特定情况下,由于悬停事件将显示下拉列表,因此您将无法悬停在悬停事件上并保持元素保持打开状态。

您有两种方法可以解决此问题:

将:hover事件移动到父容器(在这种情况下为postdrop),并在其具有下拉内容(例如postdrop_has_dropdown)时为postdrop提供一个类。然后,您可以将CSS选择器设为此元素的目标,当您将鼠标悬停在下拉菜单上时,鼠标悬停事件将保持触发状态。

.postdrop_has_dropdown:hover .postdrop_content {
    display:block;
}


使用一些简单的jQuery:

$('.postdrop_button.postdrop_open').on('click', function(){
    $(this).next().show();
});

$('.postdrop_button.postdrop_close').on('click', function(){
    $(this).next().hide();
});

09-17 14:53
查看更多