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复制它们时，当您单击名为＆＃34; 4＆＃34;的第一个文本时，它将显示名为{{1}的菜单但这就是它弄乱的地方。当你复制它时，当你点击名为＆＃34; 4＆＃34;的第一个菜单文本时，它会显示它，但当你点击第二个菜单时，第一个菜单不会隐藏。

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

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();
});

Answer 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

Answer 3

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

正如费利克斯指出的那样，你需要默认排序菜单而不是 .sort-menu

最后，切换课程应该对你想做的事情很好。

请参阅http://jsfiddle.net/thechrisjordan/sx73T/1/

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

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

3 个答案: