Question

I’m trying to create a JQuery Dropdown similar to the one used in bootstrap.

The problem which arises is that when an individual list item is clicked, all sub navigation’s display block.

Now I know this issue can be resolved with .each() but my code does not seem to work.

Please find the example here; http://jsfiddle.net/N7xgC/

Apologies if this question has already been asked before.

B

Answer 1

Try this modification:

http://jsfiddle.net/N7xgC/1/

$(function() {
    $('.main > li > a').each(function() {
        $(this).click(function() {
            // When the anchor is clicked, find the next .sub element and toggle it
            $(this).next('.sub').toggle();
        });
    });
});

I changed yours to toggle the element with the class .sub ‘next’ to the clicked anchor.