javascript - 单击下拉导航菜单(第 2 部分)

Question

我在这个link做了一个关于这个的话题.

我已经解释了该主题中的所有内容。

我查看了 stackoverflow，试图找到这方面的想法，我有点做了。

我已经使用了一些我发现的代码和 JavaScript。

HTML:

<div class="sort-list-menu-dropdown">
<span class="list-sort-title">Columns:</span>
<ul class="list-menu">
    <li class="default-sort-menu">
        4
        <ul class="sort-list">
            <li>4</li>
            <li>8</li>
        </ul>
    </li>
</ul>

CSS:

ul.sort-list { display: none; }

JS:

$("ul.list-menu > li.sort-menu").click(function () {
   $(this).find("ul").toggle();
});

JavaScript 确实有效，但是当您使用名为 sort-list-menu-dropdown 的相同 ID 复制它们时，当您单击名为“4”的第一个文本时，它将调出名为sort-list 但这正是它搞砸的地方。当你复制它时，当你点击第一个名为“4”的菜单文本时，它会弹出，但当你点击第二个菜单时，第一个菜单不会隐藏。

如果有人知道如何实现这一目标，那将对我有所帮助。

Answer 1

尝试添加 $("ul.sort-list").hide(); 这将隐藏所有与 ul.sort-list 匹配的元素，但您的下一行将切换原来的元素单击并显示它。

$("ul.list-menu > li.sort-menu").click(function () {
   $("ul.sort-list").hide();
   $(this).find("ul").toggle();
});