一次僅下拉一個菜單

Question

到目前為止，我有這個下拉菜單 。 當我單擊“菜單”，“菜單1”或“菜單2”時，其下的鏈接將下拉。

問題：我一次只需要顯示一個下拉菜單，以便用戶可以在它們之間切換。

我試圖應用css('overflow', 'hidden'); 到當前下拉菜單，但由於overflow: visible !important;而無法正常工作overflow: visible !important; 應用於.clicked類。 請幫助，任何事情將不勝感激！

Answer 1

嘗試單擊元素時，從所有元素中刪除class clicked ，然后將class clicked的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);
});

演示

更新

如果您也想關閉第二個單擊菜單，請嘗試檢查被單擊的項目是否已經被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);
});

演示2

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