基於最後關閉的元素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/