Javascript 单击下拉式导航菜单

我正在制作一个带有一些下拉菜单的列列表，我需要Jquery来实现下拉菜单

我已经找到了一些Jquery，但是问题是当你有两个ul和li菜单时，就像这样。 HTML:

我得到了一些变量，但我不认为是代码。我想我需要输入一个新变量，但我不知道它需要什么

---

如果有人知道如何做到这一点，请回复我。

对于这个问题，我有一个答案。请尝试以下代码：

$(document).ready(function() {
     $('.sort-list-dropdown').hide();
     $('ul.list-menu li').click(function() {
            $(this).next('.sort-list-dropdown').toggle();
     });
});

在代码“单击”中，您可以将其更改为“悬停”。

尝试以下操作： HTML:

<ul>

    <li class="sec">Heading One</li>
    <li><ul>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>

        <li class="sec">Heading Two</li>
        <li><ul>
            <li>Third</li>
            <li>Third</li>
            <li>Third</li>
        </ul></li>

    </ul></li>

    <li class="sec">Heading One</li>
    <li><ul>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
    </ul></li>

</ul>

$(function(){
    $('li.sec').on('click', function() {
        $(this).next('li').slideToggle();
    });
});

ul li {
    list-style:none;
}
.sec {
    background:#efefef;
    padding:25px;
    font-size:24px;
}

CSS:

<ul>

    <li class="sec">Heading One</li>
    <li><ul>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>

        <li class="sec">Heading Two</li>
        <li><ul>
            <li>Third</li>
            <li>Third</li>
            <li>Third</li>
        </ul></li>

    </ul></li>

    <li class="sec">Heading One</li>
    <li><ul>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
        <li>Secondary</li>
    </ul></li>

</ul>

$(function(){
    $('li.sec').on('click', function() {
        $(this).next('li').slideToggle();
    });
});

ul li {
    list-style:none;
}
.sec {
    background:#efefef;
    padding:25px;
    font-size:24px;
}

试着这样做：

---

所以，唯一的问题是你的两个菜单同时打开和关闭？你的目标是同一个类。因此，如果要创建两个具有相同类名的元素，jQuery将同时看到这两个元素。您需要以$（this.parent（'ul'）为目标；我在JS中看到您正在寻找属性“id”-但在html中没有任何元素具有任何id。。。如果问题是我上面的Nick所描述的——我建议查看jQuery最接近方法和子方法——并且他使用ID作为切换的一种形式。注意他的if/else语句。在

ul

标记中只能有

li

标记。使用

.sort list下拉列表

div是无效的HTMLGood调用。我在等待调用，以避免使用

var

boolean作为他的切换：-P。始终尝试将JS最小化。有了这段代码，你只需在你想要的任何标题上放置一个

sec

li类，下面是一个扩展的li结构，我喜欢它，但我需要一个on-click，因此，当你单击4时，它会显示要排序的内容。我相信你会这样做，但这不是问题所在。如果此答案解决了所问问题，请将其标记为已接受，以便未来的编码人员能够针对特定问题参考此答案。如果您需要进一步澄清，请将代码复制到新问题。除了ID名称之外，我看不到任何需要对数据进行排序的参考，因此我们需要进一步澄清。因此，我要求发布一个新问题：-）我整天都在处理问题，对于不同的问题，可能有人会比我有更好的答案。我不想要实际的排序数据。我只想要两个菜单，在它旁边是一个4，代表你正在使用的那种。然后，当您单击它时，它会弹出一个带有额外链接的div容器。