jQuery的下拉菜單，再利用功能

Question

我試着去創造一些jQuery的是的onClick下拉子菜單項。

我已經取得了一些jQuery的這樣的作品，但其具體的元素，將需要寫一遍又一遍的大菜單。

有沒有一種方法，我可以檢測點擊的元素，然後找到它的子元素和幻燈片切換顯示/隱藏。

見琴：http://jsfiddle.net/c5tnje9x/

$("#sub1").click(function() { 
     $("#sub11").slideToggle(200); 
    }); 

$("#subTwo").click(function() { 
    $("#subThree").slideToggle(200); 
}); 

和HTML

<ul> 
    <li>Home</li> 

    <li> 
     <a href="#" id="sub1">first +</a> 
     <ul id="sub11" style="background: grey;display: none;"> 
      <li>Sub1</li> 
      <li><a href="#" id="subTwo">sub1.1+</a> 
       <ul id="subThree" style="background: green;display: none;"> 
        <li>Sub Three</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
     <li>seccond</li> 
     <li class="hasSub"><a href="#">Third +</a> 
      <ul style="background: green;display: none;"> 
       <li>sub 2</li> 
       <li>sub 2.2</li> 
      </ul> 
     </li> 
     <ul> 
      <li>Sub 2</li> 
     </ul> 
</ul> 

Answer 1

你可以簡單地給他們一個同班dropdown

使用單一的jQuery單擊功能上類：

$(".dropdown").click(function() { 
     $(this).next('ul').slideToggle(200); 
    }); 

DEMO

Answer 2

試試這個

DEMO

Javacsript

$('#nav > li > ul').hide(); 

$('#nav > li > a').click(function(){ 
$(this).next('ul').slideToggle(200); 
}); 

HTML

<ul id="nav"> 

<li> 
    <a href="#">main1+</a> 
    <ul> 
     <li>sub1</li> 
     <li>sub2</li> 
    </ul>  

</li> 

<li> 
    <a href="#">main2+</a> 
    <ul> 
     <li>sub1</li> 
     <li>sub2</li> 
    </ul>  

</li> 

    <li> 
    <a href="#">main2+</a> 
    <ul> 
     <li>sub1</li> 
     <li>sub2</li> 
    </ul>  

</li> 

    </ul>  

Answer 3

幾點 -

使用類而不是ID。類是可重用的，ID不是。

給您的UL A類「富」，那麼你可以這樣做：

$('ul.foo > li a').on('click', function() { 
    $(this).next('ul').slideToggle(200); 
); 

這基本上是說 - 在主菜單中點擊，找到相應的UL並打開它。

但只會打開下拉菜單，並不會關閉其他人。你沒有明確說明你在做什麼，所以我沒有在這裏解決。

這裏列出一個簡單的方法：http://toddmotto.com/html5-and-jquery-super-simple-drop-down-nav/