CODEWITHSUNDEEP
jquerynested-lists
kylex
kylex

Reputation: 14406

jQuery slideToggle nested list ul li structure

   $("#nav ul li:not(:has(li.current))")
       .find("ul").hide().end() // Hide all other ULs
       .click(function() {
           $(this).children('ul').slideToggle('fast');
       });

I have the above code that uses a nested ul li, and expands the levels on click. However I'd like to contract the level on a second click, but the above contracts all the levels and not just the one being click on.

Edit: See this for example

Upvotes: 2

Views: 4368

Answers (2)

Benoît
Benoît

Reputation: 7427

You can just use toggle() and return false to stop propagation: Use This Example

Upvotes: 0

lonesomeday
lonesomeday

Reputation: 237847

I'm not 100% sure of what you're intending to do, but I think you can avoid the unwanted sliding by checking to see if the event originated on the handler element:

$(document).ready(function() {
    $("#nav ul li:not(:has(li.current))").find("ul").hide().end() // Hide all other ULs
    .click(function(e) {
        if (this == e.target) {  // if the handler element is where the event originated
            $(this).children('ul').slideToggle('fast');
        }
    });
});

jsFiddle

Upvotes: 2

Related Questions