如何在输入新父级时使此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没有关闭每个新父母之间的孩子，所以我需要打个电话，但我对如何做到这一点有点迷失。
我知道代码非常混乱，这个项目是在一个非常紧迫的时间框架内完成的。
欣赏你的答案和任何其他建设性的评论，欢呼：）
答案 0 :(得分：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/