隐藏基于最后一个闭合元素jquery脚本的元素

Question

如何在输入新父级时使此jquery脚本关闭所有先前打开的子级？目前它遍历所有树形结构，但是从一个父节点切换到另一个父节点不会关闭以前的子节点，而只关闭用户浏览的每个单独的父节点元素。

这是我正在使用的jquery：

<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>

这是我的html输出

<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>

我认为我的问题是，jquery没有关闭每个新父母之间的孩子，所以我需要打个电话，但我对如何做到这一点有点迷失。

我知道代码非常混乱，这个项目是在一个非常紧迫的时间框架内完成的。

欣赏你的答案和任何其他建设性的评论，欢呼：）

Answer 1

如果我理解你正确的事情，你可以简化你的代码：

//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;
});

看看这是否是您想要的行为：http://jsfiddle.net/mLcP6/1/
除了删除的间距，这与您的问题的HTML相同。

评论更新：要让所有孩子一次只显示一个，实际上会变得更简单，这将是整个代码：

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

以下是测试更新：http://jsfiddle.net/TggK9/