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

在输入新的父项时，如何使此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>

$（文档）.ready（$（函数（）{
$（'#nav>li>ul'）.hide（）；
$（'.children'）.hide（）；
$（'#nav>li'）.mousedown（函数（）{
//检查菜单当前是否未设置动画
如果（$（'#导航ul:animated'）.size（）==0）{
//创建对活动图元的引用（此）
//所以我们不必一直创建jQuery对象
$标题=$（本）；
//创建对可见同级元素的引用
//所以我们不必一直创建jQuery对象
$expandedsides=$heading.sides（）.find（'ul:visible'）；
如果（$expandedSides.size（）>0）{
$expandedsides.slideUp（0，函数（）{
$heading.find（'ul'）.slideDown（0）；
});
}
否则{
$heading.find（'ul'）.slideDown（0）；
}
}
});
$（'#nav>li>ul>li'）.mousedown（函数（）{
//检查菜单当前是否未设置动画
如果（$（'#导航ul:animated'）.size（）==0）{
//创建对活动图元的引用（此）
//所以我们不必一直创建jQuery对象
$heading2=$（此项）；
//创建对可见同级元素的引用
//所以我们不必一直创建jQuery对象
$expandedSiblings2=$heading2.siblines（）.find（'.children:visible'）；
如果（$expandedSiblings2.size（）>0）{
$expandedSiblings2.slideUp（0，函数（）{
$heading2.查找（'.children'）。向下滑动（0）；
});
}否则{
$heading2.查找（'.children'）。向下滑动（0）；
}
}    
});
}));

这是我的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没有关闭每个新父级之间的子级，所以我需要打个电话，但我对如何做有点迷茫

我知道代码是相当混乱的，这个项目是在一个巨大的匆忙和非常紧迫的时间框架内完成的

---

感谢您的回答和任何其他建设性意见，干杯：）

如果我正确理解您的意图，您可以将代码简化为：

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

看看这是不是你想要的行为：
除了删除间距之外，这与您的问题相同

更新注释：要让所有子级一次只显示一个，实际上会变得更简单，下面是完整的代码：

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

以下是测试更新： ​

---

​

如果我正确理解您的目的，您可以将代码简化为：

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

看看这是不是你想要的行为：
除了删除间距之外，这与您的问题相同

更新注释：要让所有子级一次只显示一个，实际上会变得更简单，下面是完整的代码：

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

以下是测试更新： ​

---

​

你是一个传奇人物尼克：）如果我想在同一时间只打开一个孩子，就像父母正在做的那样，我会创建另一个函数，比如$（'#nav>li>ul>li'）。单击（函数（）{//Toggle children open/closedon on click$（this）。查找（'ul'）。滑动切换（）；//防止冒泡，导致单击父母（触发上述代码）返回false；}）; ? cheers@Jared-更新了答案以显示如何执行此操作，在这种情况下，代码实际上变得更简单，因为父母和孩子在这种情况下的行为相同，提供了一个新的演示链接以进行测试。你是一个传奇人物尼克：）如果我希望一次只打开一个孩子，就像父母在做的那样，我会创建另一个函数吗$（“#nav>li>ul>li”）。单击（函数（）{