切換列表中，單擊項目顯示項目

Question

所有子項目，而不是隻有子項目對不起，模糊的標題，但我找不到合適的標題，很好地解釋問題。

問題：我寫了一個代碼來切換列表。它以我想要的方式工作。當我點擊「頭部類別」時，它會打開子類別等等。當我第一次點擊頭部類別時，會出現問題，它會打開每個列表，這不是我想要的。當我關閉並再次打開它時，它的工作方式應該是這樣。我試圖弄清楚爲什麼會這樣做，但我不知道。所以如果有人可以幫助我，他/她將不勝感激。

JQuery代碼。

$(document).ready(function() 
{ 
$('ul.subcat').hide(); 

$('li').click(function(event) 
{ 
    event.stopPropagation(); 
    $('ul', this).toggle(); 

}); 
}); 

HTML代碼

<ul class="headcat"> 
    <li>item 1 
    <ul class="subcat"> 
    <li>subitem 1 
    <ul class="subcat"> 
     <li>subsubitem 1 
     <ul class="subcat"> 
     <li><p>text</p></li> 
     </ul> 
     </li> 
     <li>subsubitem 2 
     <ul class="subcat"> 
     <li><p>text</p></li> 
     <li>subsubsubitem 1 
     <ul class="subcat"> 
      <li><p>text</p></li> 
     </ul> 
     </li> 
     <li>subsubsubitem 2</li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
    <li>item 2</li> 
    </ul> 
    </li> 
</ul> 

Answer 1

你只需要選擇當前點擊li直接後裔，試試這個：

$(this).children("ul").toggle(); 

下也會工作，但是它不認爲是最佳練習使用>後代選擇器，而不使用主元素。

$('> ul', this).toggle(); 

Example fiddle

Answer 2

或者試圖隱藏第一subcat只在初始化：

$('ul.subcat:first').hide(); 

DEMO這裏：http://jsfiddle.net/kv4dT/