Multiple Dropdown menus with click event

Question

So I have more dropdown menus on a page, and when I click one, how can I hide the other ones which are open?Here is my code:

$('nav ul li.sub-menu > a,nav ul li.sub-menu2 > a').click(function(){
    $('.open-menu').toggle();
        $('.active_menu').removeClass('active_menu');
        $(this).parent().toggleClass('active_menu');
        $(this).parent().find('ul').toggleClass('open-menu').toggle();
    return false;
});

I tried with the .open-menu to add to a dropdown when it's active, and active_menu it's just to style the active link.

//Le

$(document).ready(function() { 
    $('.sub-menu > a').click(function(){
            $('.sub-menu ul').toggleClass('open-menu');
            $(this).parent().find('ul').toggleClass('open-menu');
        return false;
    });
});

Now it doesn't open the menu that I click on, it opens other menu

first, try to target only as specifically as required 'nav ul li.sub-menu > a' is overly specific. For instance, I'm guessing you don't have many <li> which are not definitely in <ul> — Sinetheta
– Sinetheta, Commented Jan 23, 2012 at 2:18

Al Katawazi · Accepted Answer · 2012-01-23 02:33:28Z

1

Usually what I do in this situation is i give all the drop downs a class such as

<select name="MyDropDown" class="DropDownGroup" > <option>1</opion> </select>

Since all the drop downs have this class its pretty easy to disable all of them except the one you just clicked. Simply do the following

$(".DropDownGroup").live("click", function(){
   $(".DropDownGroup").hide();
   $(this).show();
});

Now this only covers click as I assumed that is what you wanted but you may need to do it on index change.

answered Jan 23, 2012 at 2:33

Al Katawazi

7,2608 gold badges28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Uffo · Accepted Answer · 2012-01-23 02:42:36Z

1

Ok, I got it to work like this:

$('.sub-menu > a').click(function(){

        if($(this).parent().find('ul').hasClass('open-menu'))
        {
            $(this).parent().toggleClass('active_menu');
            $(this).parent().find('ul').toggleClass('open-menu');
        }else{
            $('.sub-menu ul.open-menu').toggleClass('open-menu');
            $(this).parent().find('ul').toggleClass('open-menu');
            $('.sub-menu.active_menu').toggleClass('active_menu');
            $(this).parent().toggleClass('active_menu');
        }
    return false;
});

edited Jan 23, 2012 at 2:42

answered Jan 23, 2012 at 2:33

Uffo

10.1k26 gold badges95 silver badges160 bronze badges

Collectives™ on Stack Overflow

Multiple Dropdown menus with click event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related