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

试试这个

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>