一次只能下拉一個菜單

到目前爲止，我有這個drop-down menu。當我點擊「菜單」，「菜單1」或「菜單2」時，它下面的鏈接將會下降。一次只能下拉一個菜單

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

我試圖將css('overflow', 'hidden');應用於當前下拉的菜單，但它不起作用，因爲overflow: visible !important;應用於.clicked類。請幫忙，任何事情將不勝感激！

2014-04-25 Marek

你可以使用jQuery實現這一目標。這是一個解決方案 - http://stackoverflow.com/questions/23270323/click-to-expand-shall-result-in-collapsing-other-opened-items – Orahmax

我無法及時幫助您的HTML是真的很難閱讀。你真的需要這麼多嗎？ o_O' – Apolo

@Apolo你仍然有機會:)菜單應該在第二次點擊時關閉，所以恐怕我需要堅持toggleClass。是的，標記必須保持不變。 – Marek

嘗試當你點擊一個元素上的所有元素刪除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

UPDATE

如果你也想在第二點擊菜單關閉嘗試檢查點擊項目是否已經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

來源

2014-04-25 11:09:24 laaposto

它修復了部分，但我需要菜單也關閉第二次點擊。 – Marek

已解決，將其標記爲可以回答。非常感謝！ – Marek

您還可能要關閉鏈接

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

來源

2014-04-25 11:14:52

一次只能下拉一個菜單

回答

相關問題