點擊兒童菜單

我正在尋找某種jQuery點擊菜單，如果點擊的li元素有子元素，就會打開另一個ul - 就像這樣。點擊兒童菜單

<ul> 
    <li><a href"#">Item 1</a> 
     <ul> 
      <li><a href"page1.html">Item 1 child 1</a></li> 
      <li><a href"page2.html">Item 1 child 2</a></li> 
      <li> 
       <a href"#">Item 1 child 3</a> 
       <ul> 
        <li><a href"#">Item 1 child 3 child</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href"page3.html">Item 2</a></li> 
    <li><a href"page4.html">Item 3</a></li> 
</ul>

所以，當我點擊「項目1」將開闢新的列表，如果我點擊「項目1子3」它會打開一個新排行榜，等等等等。

我想我曾經看過一些關於.next但我不太確定。

來源

2012-04-27 Morten Hagh

這應該做你需要的東西：

$("a").click(function(e){ 
    $(this).closest("li").children("ul").toggle(); 
}); 

$("a").click();//quick hack to hide all children to start with (if desired)

See here for a working example

Here is an example with a sliding effect（如暗示在評論）

注意

使用.children函數將意味着一旦父代被重新擴展，所有「子擴展」將被「保留」 - 對我來說這似乎是自然行爲。

如果您不希望關閉父重置所有子擴展也在下一次父展開關閉，那麼你可以使用.find方法代替.children

而且，應該考慮到，此代碼將應用於頁面上的所有A鏈接，如果您需要更具體地指出應用於您的哪個鏈接應更改選擇器。一個例子只包括UL元素內的鏈接可能是這樣的：

$("ul a").click(...

來源

2012-04-27 10:36:19 musefan

這實際上似乎是做我在尋找的！ :) 原諒我的愚蠢 - 這可以與f.x一起使用。 slideDown/slideUp – 2012-04-27 10:55:47

@MortenHagh：'.toggle'函數負責檢查元素的當前可見性。如果你想自定義顯示/隱藏代碼，那麼你將需要拆分代碼.. [這樣的事情]（http://jsfiddle.net/musefan/FTdxS/9/） – musefan 2012-04-27 11:00:55

這完美的作品！非常感謝你:)願所有這一切都來臨！ – 2012-04-27 11:13:55

使用jQuery插件手風琴將您的要求的理想方法。如何實現它的更多細節，可以在這裏找到 jQuery Accordion

來源

2012-04-27 10:37:41 Misam

沒有全面實施，但這應該幫助我猜：

$("list").click(function(){ 
    $(this).find("ul").show(); 
});

也就是說，你可以使用「查找（）」到得到孩子的元素。

編輯：如果你想fisrt發生然後使用「第一（）」api。

Ref：http://api.jquery.com/first/

來源

2012-04-27 10:39:14 KBN

點擊兒童菜單

回答

相關問題