Question

jQuery: how do I make a collapsable tree nav?

This solution is exactly what I need and is working well to collapse an unordered list I made, but what if i want to apply the same functionality to the nested li’s? When I add the same

$('.sortable>li>ol>li').click(function() {
$(this).children("ol").stop(true, true).toggle("fast");
});

and then click, it does what it needs to but the node then closes..

my HTML is

   <ul class='sortable'>
        <li>text1</li>
        <ul>
          <li>text2</li>
           <ul>
             <li>text3</li>
             <li>text3</li>
             <li>text3</li>
           </ul>
          <li>text2</li>
          <li>text2</li>
        </ul>
        <li>text1</li>
        <li>text1</li>
    </ul>

So when I click on 1, 2 slides down and that works but if i click on 2, i want 3 to toggle but 2 slides up.

$('.sortable>li').click(function() {
    $(this).children("ol").stop(true, true).toggle("fast");
});​

Thats my code… I hope I’ve explained this, I’ll make a jFiddle too.

http://jsfiddle.net/tara_irvine/uaDhr/4/

Answer 1

Along the lines of what YonoRan was going for, you want to stop the event from bubbling up from the inner click element to the outter one. Modifying your code to use event.stopPropagation I believe got the desired result:

$('.sortable>li').click(function() {
    $(this).children("ol").stop(true, true).slideToggle("fast");
});

$('.sortable>li>ol>li').click(function(event) {
    event.stopPropagation();
    $(this).children("ol").stop(true, true).toggle("fast");
});