Question

到目前为止，我有drop-down menu。当我点击＆＃34;菜单＆＃34;，＆＃34;菜单1＆＃34;或＆＃34; Menu2＆＃34;，其下的链接将下拉。

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

我尝试将css('overflow', 'hidden');应用于当前删除的菜单，但由于overflow: visible !important;已应用于.clicked类，因此无法正常工作。请帮助，任何事都将受到高度赞赏！

Answer 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

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

一次只下载一个菜单

2 个答案: