DEMO

Question

我试图创建一些jquery，onClick下拉子菜单项。

我已经制作了一些可行的Jquery，但它特定于该元素，并且需要一遍又一遍地编写一个大菜单。

有没有办法可以检测到点击的元素，然后找到它的子元素并滑动切换以显示/隐藏。

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

<强>的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 2

您可以简单地为他们提供同一个班级dropdown

在课堂上使用单个jquery点击功能：

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

DEMO

Answer 3

有几点 -

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

给你的ul一个'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下拉菜单，重用功能

3 个答案:

DEMO