Drop down div for multiple divs by id

Question

What would be the best practice to use dropdowns in multiple divs by different id's

I have a user stream of which when I add a dropdown menu to add delete, edit post etc opens only one div on the top post so I know it has to be done by a unique id.

Maybe some javascript? This is what I have so far.

<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

You could do this with plain css.

.postdrop_content {
    display:none;
}

Then you could invoke the display on the hover event.

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

Do note that in this particular scenario, however, as the hover event will show the dropdown, you won't be able to hover over it and maintain the element staying open.

You have two methods to resolve this:

Move the :hover event to the parent contianer (postdrop in this case) and give postdrop a class when it has dropdown content, such as, postdrop_has_dropdown . You can then make your CSS selector target this element and the hover event will stay fired when you hover over the dropdown.

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

Use some simple jQuery:

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

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

Answer 2

You can handle it with javascript. I recommend using Knockout js http://knockoutjs.com/

Populate your feed using an observable array, and you can execute the javascript with whatever event binding you wish to use.

<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>

The $root object is the controller bound to the DOM.

The $data object is the object within the array

The feed will update when you update the 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
    };
};