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/