一次只下拉一个菜单答案

【问题标题】：Drop down only one menu at a time一次只下拉一个菜单
【发布时间】：2014-04-25 11:06:09
【问题描述】：

到目前为止，我有这个drop-down menu。当我点击“Menu”、“Menu1”或“Menu2”时，它下面的链接会下拉。

问题：我需要一次只显示一个下拉菜单，以便用户可以在它们之间切换。

我尝试将css('overflow', 'hidden'); 应用于当前下拉的菜单，但它不起作用，因为overflow: visible !important; 应用于.clicked 类。请帮忙，我们将不胜感激！

【问题讨论】：

你可以使用 jquery 来实现。这是一个解决方案 - stackoverflow.com/questions/23270323/…
我帮不上忙...您的 html 真的很难阅读。你真的需要这么多 ul/li 吗？ o_O'
@Apolo 你还有机会 :) 菜单应该在第二次点击时关闭，所以恐怕我需要坚持使用 toggleClass。是的，标记必须保持不变。

标签： javascript jquery html drop-down-menu

【解决方案1】：

当你点击一个元素时尝试从所有元素中删除class clicked并将class clicked添加到被点击的元素

$("#product-menu>ul>li").click(function () {
    var hidden = $(this).find('.clicked');
    $("#product-menu>ul>li").removeClass('clicked');
    $(this).addClass('clicked');
    $('.productSubmenu').width(menuWidth);
});

DEMO

更新

如果您还想关闭第二次点击菜单，请尝试检查点击的项目是否已经有class clicked：

$("#product-menu>ul>li").click(function () {
    var hidden = $(this).find('.clicked');
    if ($(this).hasClass('clicked')) {
        $(this).removeClass('clicked')
    } else {
        $("#product-menu>ul>li").removeClass('clicked');
        $(this).addClass('clicked');

    }
    $('.productSubmenu').width(menuWidth);
});

DEMO2

【讨论】：

它部分修复了它，但我需要菜单在第二次点击时也关闭。
已解决，我会尽可能将其标记为已回答。非常感谢！

【解决方案2】：

您可能还想关闭链接

$("#product-menu>ul>li").click(function () {
    var hidden = $(this).find('.clicked');
    $("#product-menu>ul>li").removeClass('clicked');
    $("#product-menu .productSubmenu2").hide(); // this one I added
    $(this).addClass('clicked');
    $('.productSubmenu').width(menuWidth);
});

【讨论】：