通过ID下拉多个div的div

Question

在多个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>

Answer 1

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

.postdrop_content {
    display:none;
}

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

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

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

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

移动：悬停事件与母体contianer（postdrop在这种情况下），并给postdrop一个类时，它具有下拉内容，例如， postdrop_has_dropdown 。 然后，您可以将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();
});

Answer 2

您可以使用javascript处理它。 我建议使用Knockout js http://knockoutjs.com/

使用可观察的数组填充Feed，然后可以使用希望使用的事件绑定来执行javascript。

<div class="myFeed" data-bind="foreach: myFeed">
    <div class="feedItem" data-bind="event:{click: function(e){$root.doStuff($data e);}}">
        <div class="itemAction" data-bind="event:{mouseOver: function(e){$root.handleMouseOver($data)}}"></div>
    </div>
</div>

$ root对象是绑定到DOM的控制器。

$ data对象是数组内的对象

当您更新observableArray myFeed时，供稿将更新

var myController = function()
{
    var self = this;
    this.myFeed = ko.observableArray([]);

    this.handleMouseOver = function(data)
    {
        // Do stuff with data
    };   

    this.doStuff = function(data, e)
    {
        // e is the event that triggered it. e.target is the element you want to manipulate
        // do stuff with data
    };
};