jQuery嵌套ul與李的父親孩子，顯示隱藏

Question

我想創建一個簡單的手風琴菜單，其中ul的嵌套在李隱藏，直到父li被點擊，這將首先隱藏所有其他嵌套ul的，如果暴露，然後暴露該李的嵌套ul。

唯一的另一個問題是我想刪除父li的href。

我已經完成了大部分的工作，除了我的嵌套ul li仍然繼承前面提到的操作，即使我是針對li的父類。我知道我錯過了一些基本的東西。在此先感謝

HTML

<ul> 
    <li.expanded><a href="foo">Lorum</a> 
    <ul> 
     <li.leaf><a href="foo">Lorum</a></li> 
     <li.leaf><a href="foo">Lorum</a></li> 
     <li.leaf><a href="foo">Lorum</a></li> 
     <li.leaf><a href="foo">Lorum</a></li> 
    </ul> 
    </li> 
    <li.expanded><a href="foo">Lorum</a> 
    <ul> 
     <li.leaf><a href="foo">Lorum</a></li> 
     <li.leaf><a href="foo">Lorum</a></li> 
     <li.leaf><a href="foo">Lorum</a></li> 
     <li.leaf><a href="foo">Lorum</a></li> 
    </ul> 
    </li> 
    <li.expanded><a href="foo">Lorum</a> 
    <ul> 
     <li.leaf><a href="foo">Lorum</a></li> 
     <li.leaf><a href="foo">Lorum</a></li> 
     <li.leaf><a href="foo">Lorum</a></li> 
     <li.leaf><a href="foo">Lorum</a></li> 
    </ul> 
    </li> 
    <li.expanded><a href="foo">Lorum</a> 
    <ul> 
     <li.leaf><a href="foo">Lorum</a></li> 
     <li.leaf><a href="foo">Lorum</a></li> 
     <li.leaf><a href="foo">Lorum</a></li> 
     <li.leaf><a href="foo">Lorum</a></li> 
    </ul> 
    </li> 
</ul> 

jQuery的

$(document).ready(function() { 
    $('ul ul').hide(); 
    $('ul li.expanded a').removeAttr("href"); 
    $('ul li').click(function(){ 
     $('ul ul').hide('slow'); 
     $(this).find('ul').toggle('slow'); 



    }); 
}); 
; 

Answer 1

有在HTML中一些錯別字，我已經改變的li.leaf類= '葉'。我的腳本也有變化。隱藏所有sub ul的css被使用。 看到它的行動：http://jsfiddle.net/theuideveloper/DFHWd/4/ 希望這可以幫助你。 快樂編碼！ -theUiDeveloper

HTML

<ul id="master"> 
    <li class="expanded"><a href="foo">Lorum1</a> 
    <ul> 
     <li class="leaf"><a href="foo">Lorum</a></li> 
     <li class="leaf"><a href="foo">Lorum</a></li> 
     <li class="leaf"><a href="foo">Lorum</a></li> 
     <li class="leaf"><a href="foo">Lorum</a></li> 
    </ul> 
    </li> 
    <li class="expanded"><a href="foo">Lorum2</a> 
    <ul> 
     <li.leaf><a href="foo">Lorum</a></li> 
     <li.leaf><a href="foo">Lorum</a></li> 
     <li.leaf><a href="foo">Lorum</a></li> 
     <li.leaf><a href="foo">Lorum</a></li> 
    </ul> 
    </li> 
    <li class="expanded"><a href="foo">Lorum3</a> 
    <ul> 
     <li class="leaf"><a href="foo">Lorum</a></li> 
     <li class="leaf"><a href="foo">Lorum</a></li> 
     <li class="leaf"><a href="foo">Lorum</a></li> 
     <li class="leaf"><a href="foo">Lorum</a></li> 
    </ul> 
    </li> 
    <li class="expanded"><a href="foo">Lorum4</a> 
    <ul> 
     <li class="leaf"><a href="foo">Lorum</a></li> 
     <li class="leaf"><a href="foo">Lorum</a></li> 
     <li class="leaf"><a href="foo">Lorum</a></li> 
     <li class="leaf"><a href="foo">Lorum</a></li> 
    </ul> 
    </li> 
</ul> 

CSS

ul#master ul{ 
display:none; 
} 

jQuery的

$(document).ready(function() { 
      $('ul li.expanded a').each(function(i){ 
      var subUl = $(this).parent().find('ul'); //Get the sub ul. 
      $(this).bind('click',function(e){ 
        e.preventDefault(); // Prevent the default action of the link 
        $('.expanded ul').hide(); // hide all the other ULs 
        subUl.toggle(); 
       }) ; 
      }); 
     });  

Answer 2

你可以改變你的jQuery如下：

$(document).ready(function() { 
    $('ul ul').hide(); 
    $('ul li.expanded a').removeAttr("href"); 
    $('ul li.expanded > a').click(function(event) { 
     $('ul ul').hide('slow'); 
     $(this).parent().find('ul').toggle('slow'); 
    }); 
}); 

的問題是有針對性的li的子元素爲bubbling他們click事件後，觸發li.expanded的單擊事件處理程序。我已將選擇器更改爲直接在li下與expanded類別對齊a。

這裏有一個工作示例：http://jsfiddle.net/andrewwhitaker/ybVFj/

而且，你的HTML應該是這個樣子：

<ul> 
    <li class="expanded"><a href="foo">Lorum</a> 
     <ul> 
      <li class="leaf"><a href="foo">Lorum</a></li> 
      <li class="leaf"><a href="foo">Lorum</a></li> 
      <li class="leaf"><a href="foo">Lorum</a></li> 
      <li class="leaf"><a href="foo">Lorum</a></li> 
     </ul> 
    </li> 
    <li class="expanded"><a href="foo">Lorum</a> 
     <ul> 
      <li class="leaf"><a href="foo">Lorum</a></li> 
      <li class="leaf"><a href="foo">Lorum</a></li> 
      <li class="leaf"><a href="foo">Lorum</a></li> 
      <li class="leaf"><a href="foo">Lorum</a></li> 
     </ul> 
    </li> 
    <li class="expanded"><a href="foo">Lorum</a> 
     <ul> 
      <li class="leaf"><a href="foo">Lorum</a></li> 
      <li class="leaf"><a href="foo">Lorum</a></li> 
      <li class="leaf"><a href="foo">Lorum</a></li> 
      <li class="leaf"><a href="foo">Lorum</a></li> 
     </ul> 
    </li> 
    <li class="expanded"><a href="foo">Lorum</a> 
     <ul> 
      <li class="leaf"><a href="foo">Lorum</a></li> 
      <li class="leaf"><a href="foo">Lorum</a></li> 
      <li class="leaf"><a href="foo">Lorum</a></li> 
      <li class="leaf"><a href="foo">Lorum</a></li> 
     </ul> 
    </li> 
</ul>