Question

how can I make this jquery script close all previously opened children when entering a new parent? At the moment it traverses thru all the tree structure fine, but switching from one parent to another does not close the previous children, but rather only the each individual parents elements as a user browses.

Here is the jquery I’m using:

<script type="text/javascript">
    $(document).ready($(function(){
      $('#nav>li>ul').hide();
      $('.children').hide();

      $('#nav>li').mousedown(function(){
        // check that the menu is not currently animated
        if ($('#nav ul:animated').size() == 0) {
          // create a reference to the active element (this)
          // so we don't have to keep creating a jQuery object
          $heading = $(this);
          // create a reference to visible sibling elements
          // so we don't have to keep creating a jQuery object
          $expandedSiblings = $heading.siblings().find('ul:visible');
          if ($expandedSiblings.size() > 0) {
            $expandedSiblings.slideUp(0, function(){
                $heading.find('ul').slideDown(0);
            });
          }
          else {
            $heading.find('ul').slideDown(0);
          }
        }
      });

      $('#nav>li>ul>li').mousedown(function(){
        // check that the menu is not currently animated
        if ($('#nav ul:animated').size() == 0) {
          // create a reference to the active element (this)
          // so we don't have to keep creating a jQuery object
          $heading2 = $(this);
          // create a reference to visible sibling elements
          // so we don't have to keep creating a jQuery object
          $expandedSiblings2 = $heading2.siblings().find('.children:visible');
          if ($expandedSiblings2.size() > 0) {
            $expandedSiblings2.slideUp(0, function(){
                $heading2.find('.children').slideDown(0);
            });
          } else {
            $heading2.find('.children').slideDown(0);
          }
        }    

       });

    }));

    </script>

and here is my html output

<ul id="nav"> 

<li><a href="#">folder 4</a>

<ul><li><a href="#">2001</a>

<ul><li class="children"><a href="./directory//folder 4/2001/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder 4/2001/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder 4/2001/doc3.txt">doc3.txt</a></li>

</ul>

</li>

<li><a href="#">2002</a>

<ul><li class="children"><a href="./directory//folder 4/2002/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder 4/2002/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder 4/2002/doc3.txt">doc3.txt</a></li>

<li class="children"><a href="./directory//folder 4/2002/doc4.txt">doc4.txt</a></li>

</ul>

</li>

<li><a href="#">2003</a>

<ul><li class="children"><a href="./directory//folder 4/2003/Copy of doc1.txt">Copy of doc1.txt</a></li>

<li class="children"><a href="./directory//folder 4/2003/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder 4/2003/doc2.txt">doc2.txt</a></li>

</ul>

</li>

<li><a href="#">2004</a>

<ul><li class="children"><a href="./directory//folder 4/2004/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder 4/2004/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder 4/2004/doc3.txt">doc3.txt</a></li>

<li class="children"><a href="./directory//folder 4/2004/doc4.txt">doc4.txt</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">folder1</a>

<ul><li><a href="#">2001</a>

<ul><li class="children"><a href="./directory//folder1/2001/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder1/2001/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder1/2001/doc3.txt">doc3.txt</a></li>

</ul>

</li>

<li><a href="#">2002</a>

<ul><li class="children"><a href="./directory//folder1/2002/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder1/2002/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder1/2002/doc3.txt">doc3.txt</a></li>

<li class="children"><a href="./directory//folder1/2002/doc4.txt">doc4.txt</a></li>

</ul>

</li>

<li><a href="#">2003</a>

<ul><li class="children"><a href="./directory//folder1/2003/Copy of doc1.txt">Copy of doc1.txt</a></li>

<li class="children"><a href="./directory//folder1/2003/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder1/2003/doc2.txt">doc2.txt</a></li>

</ul>

</li>

<li><a href="#">2004</a>

<ul><li class="children"><a href="./directory//folder1/2004/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder1/2004/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder1/2004/doc3.txt">doc3.txt</a></li>

<li class="children"><a href="./directory//folder1/2004/doc4.txt">doc4.txt</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">folder2</a>

<ul><li><a href="#">2001</a>

<ul><li class="children"><a href="./directory//folder2/2001/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder2/2001/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder2/2001/doc3.txt">doc3.txt</a></li>

</ul>

</li>

<li><a href="#">2002</a>

<ul><li class="children"><a href="./directory//folder2/2002/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder2/2002/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder2/2002/doc3.txt">doc3.txt</a></li>

<li class="children"><a href="./directory//folder2/2002/doc4.txt">doc4.txt</a></li>

</ul>

</li>

<li><a href="#">2003</a>

<ul><li class="children"><a href="./directory//folder2/2003/Copy of doc1.txt">Copy of doc1.txt</a></li>

<li class="children"><a href="./directory//folder2/2003/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder2/2003/doc2.txt">doc2.txt</a></li>

</ul>

</li>

<li><a href="#">2004</a>

<ul><li class="children"><a href="./directory//folder2/2004/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder2/2004/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder2/2004/doc3.txt">doc3.txt</a></li>

<li class="children"><a href="./directory//folder2/2004/doc4.txt">doc4.txt</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">folder3</a>

<ul><li><a href="#">2001</a>

<ul><li class="children"><a href="./directory//folder3/2001/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder3/2001/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder3/2001/doc3.txt">doc3.txt</a></li>

</ul>

</li>

<li><a href="#">2002</a>

<ul><li class="children"><a href="./directory//folder3/2002/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder3/2002/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder3/2002/doc3.txt">doc3.txt</a></li>

<li class="children"><a href="./directory//folder3/2002/doc4.txt">doc4.txt</a></li>

</ul>

</li>

<li><a href="#">2003</a>

<ul><li class="children"><a href="./directory//folder3/2003/Copy of doc1.txt">Copy of doc1.txt</a></li>

<li class="children"><a href="./directory//folder3/2003/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder3/2003/doc2.txt">doc2.txt</a></li>

</ul>

</li>

<li><a href="#">2004</a>

<ul><li class="children"><a href="./directory//folder3/2004/doc1.txt">doc1.txt</a></li>

<li class="children"><a href="./directory//folder3/2004/doc2.txt">doc2.txt</a></li>

<li class="children"><a href="./directory//folder3/2004/doc3.txt">doc3.txt</a></li>

<li class="children"><a href="./directory//folder3/2004/doc4.txt">doc4.txt</a></li>

</ul>

</li>

</ul>

</li>

</ul>

I assume my problem is, jquery isn’t closing the children between each new parent so I need to make a call, but I’m a bit lost on how to do that.

I know the code is pretty messy, this project was done in a huge rush and a very tight timeframe.

Appreciate your answers and any other constructive comments, cheers 🙂

Answer 1

If I understand what you’re after correctly, you can simplify your code down a bit to this:

//Hide the menus and their children initially
$('#nav').find('ul').hide();

$('#nav>li').click(function(){
  //Close sibling's children
  $(this).siblings().find('ul').slideUp();
  //Slide down children/open this node
  $(this).children('ul').slideDown();
});
$('#nav>li>ul>li').click(function(){
  //Toggle children open/closed on click
  $(this).find('ul').slideToggle();
  //Prevent bubbling, causing a click on the parent (triggering above code)
  return false;
});

See if it’s the behavior you want here: http://jsfiddle.net/mLcP6/1/
Other than spacing removed, that’s the same HTML as your question.

Update for comment: To get all children to only show one at a time, it actually gets simpler, this would be the entire code:

$('#nav').find('ul').hide();
$('#nav li').click(function(){
  $(this).siblings().find('ul').slideUp();
  $(this).children('ul').slideToggle();
  return false;
});​

Here’s the update for testing: http://jsfiddle.net/TggK9/
​
​