点击下拉导航菜单（第 2 部分）答案

【问题标题】：On-click drop-down nav menu (part 2)点击下拉导航菜单（第 2 部分）
【发布时间】：2014-01-23 11:10:24
【问题描述】：

我在这个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”的菜单文本时，它会弹出它，但当你点击第二个菜单时，第一个菜单不会隐藏。

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

【问题讨论】：

标签： javascript jquery html css drop-down-menu

【解决方案1】：

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

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

【讨论】：

这项工作，但是当你点击离开菜单并点击页面时，当你点击离开时它会隐藏它。
Nvm 我明白了。感谢您的帮助。

【解决方案2】：

首先，您需要将.sort-menu 更改为.default-sort-menu，因为它是正确的类名。

其次，当单击列表项以显示属于该ul.sort-list的子菜单时，您可以对其他ul.sort-list隐藏其他子菜单

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

Fiddle Demo

【讨论】：

【解决方案3】：

这可能是复制/粘贴代码的副产品，但请确保您正在关闭 div。但你可能实际上并不需要那个 div。

正如 Felix 指出的那样，您需要 default-sort-menu 而不是 .sort-menu

最后，切换类应该可以满足您的需求。

见http://jsfiddle.net/thechrisjordan/sx73T/1/

$('ul.list-menu > li.default-sort-menu').click(function () {
   $(this).find('ul').toggleClass('sort-list');
});

【讨论】：