多個基於CSS和jQuery的下拉菜單在點擊另一個菜單後保持打開狀態

Question

基於以下教程，我在一個頁面上設置了多個基於jQuery的下拉菜單：http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx。

我修改了幾個地方的代碼，現在我想出了以下解決方案：http://jsfiddle.net/NcNHf/2/。

它工作得很好，但我正在尋找一種方式來關閉其他下拉菜單，當我點擊另一個下拉菜單時，它仍然打開。

那麼我怎樣才能確保只有一個下拉菜單可以在任何時候在頁面上激活？

在此先感謝！

Answer 1

您可以選擇所有下拉菜單並過濾掉當前，然後全部隱藏它們。

$(".dropdown > dt a").click(function (e) { 
    var $ul = $(this).parent().next().find('> ul').toggle(); 
    $('.dropdown ul').not($ul).hide(); 
    e.preventDefault(); 
}); 

Working example