Jquery 下拉菜单，复用功能

Question

我正在尝试创建一些 jquery 的 onClick 下拉子菜单项。

我做了一些 Jquery 可以工作的，但它特定于元素，并且需要一遍又一遍地写一个大菜单。

有什么方法可以检测点击的元素，然后找到它的子元素并滑动切换到 show/hide。

$("#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

你可以简单地给他们一个相同的 class dropdown

在 class 上使用单个 jquery 单击功能：

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

DEMO

Answer 2

试试这个

DEMO

Javascript

$('#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

几点 -

使用 classes 代替 ID。类可重复使用，ID 不可。

给你的 ul 一个 class 'foo'，然后你可以这样做：

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

这基本上就是说-点击顶部菜单，找到相应的ul并打开它。

但这只会打开下拉菜单，不会关闭其他菜单。你没有明确说明你在做什么，所以我没有在这里解决这个问题。

这里列出了一个简单的方法：http://toddmotto.com/html5-and-jquery-super-simple-drop-down-nav/

Jquery 下拉菜单，复用功能

Jquery drop down menu, reuse function

html

css

jquery

DEMO