jQuery nested ul drop down menu

Question

I have a simple ul menu here with nested ul's

I want the nested menu to slide down when the link is clicked and slide up again on the second click. This is working.

I also need any other open nested menus to close when another link is clicked. This isn't working.

I tried to use this to close any open nested menus before I open the nested menu I want but this also closes the nested menu when a link in the nested menu is clicked.

$(document).ready(function () {
    $('#nav ul.children').slideUp();
    $('#nav li').click(function (e) {
        $('ul.children').slideUp();
        $('ul', this).slideToggle();
        e.stopPropagation();
    });
});

http://www.ttmt.org.uk/forum/nav/index2.html

How can I slideToggle the nested menus when it's parent is clicked and close any open nested menus when another link is clicked.

<ul id="nav">
   <li><a href="#">One</a>
     <ul class="children">
        <li><a href="http://www.google.com">One/One</a></li>
        <li><a href="http://www.bbc.com">One/Two</a></li>
        <li><a href="#">One/Three</a></li>
     </ul>
   </li>
   <li><a href="#">Two</a></li>
   <li><a href="#">Three</a>
     <ul class="children">
        <li><a href="#">Three/One</a></li>
        <li><a href="#">Three/Two</a></li>
     </ul>
   </li>  
 </ul>

 $(document).ready(function(){
   $('#nav ul.children').slideUp();
   $('#nav li').click(function(e){
     //$('ul.children').slideUp();
     $('ul', this).slideToggle();
     e.stopPropagation();
   });
 });

EDIT

I have another major problem with my code, because I close the nested ul at the start with

$('#nav ul.children').slideUp();

When a link is clicked and the page reloads the all the menus are closed. How can I keep the nested menu open when the page reloads.

Your links are dead, that's not very useful.

Hanna
– Hanna

2013-09-23 15:08:46 +00:00
Commented Sep 23, 2013 at 15:08 — Hanna
– Hanna, Commented Sep 23, 2013 at 15:08

Faust · Accepted Answer · 2012-04-25 09:33:01Z

1

To prevent the action when a sub-item is clicked, use this:

$('#nav > li').click(function(e){ ...

the '>' character selects an li that is a child in contrast to any descendent

...so the $('ul.children').slideUp(); will not occur when clicking on a link in the sub-bmenus.

answered Apr 25, 2012 at 9:33

Faust

15.5k10 gold badges58 silver badges116 bronze badges

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

Comments

Dharmesh · Accepted Answer · 2012-04-25 10:12:54Z

0

first of all hide all nested ul tags hidden using css style on page load to solve your second problem (pageload)

 li ul
 {
   display:none;
 }

put this script

 $("#nav li").click(function(){
    $(this).parent().find("li ul:visible").slideUp(); //this helps to slideUp visible uls
    //then your code
 });

answered Apr 25, 2012 at 10:12

Dharmesh

9734 gold badges15 silver badges26 bronze badges

Collectives™ on Stack Overflow

jQuery nested ul drop down menu

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