CODEWITHSUNDEEP
jquery
Guy
Guy

Reputation: 357

JQUERY. Menu Toggle help required

I have a horizontal navigation of <li>'s which on click I would like to have the child ul drop down. I have managed to do this, but when you click on the next <li> it does not close the previous.

Here is my code:

$("#menu-flag-menu li a").click(function(){
    var ul = $(this).next("ul");
    if (ul.is(":hidden")) {
        ul.slideToggle();
    } else {
        ul.slideToggle();
    }
});

The HTML is:

<div class="menu-flag-menu-container">
<ul id="menu-flag-menu" class="menu">
<li id="menu-item-138""><a href="">DPSS 1064nm</a>
<ul class="sub-menu">
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
</ul>
</li>
<li id="menu-item-138""><a href="">DPSS 1064nm</a>
<ul class="sub-menu">
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
</ul>
</li>
<li id="menu-item-138""><a href="">DPSS 1064nm</a>
<ul class="sub-menu">
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
    <li id="menu-item-135" class=""><a href="">Starlase AO2</a></li>
</ul>
</li>

</ul>

Upvotes: 0

Views: 238

Answers (1)

Samich
Samich

Reputation: 30175

$("#menu-flag-menu li a").click(function(){ 

    // close all opened sub menus
    $("#menu-flag-menu > li > ul").slideUp();

    var ul = $(this).next("ul");     
    ul.slideToggle(); 
});

Code: http://jsfiddle.net/XaLER/2/

Updated code: http://jsfiddle.net/XaLER/3/

Upvotes: 1

Related Questions