如何正確隱藏選定的下拉菜單？

我試圖實現類似於引導按鈕的下拉菜單（http://twitter.github.io/bootstrap/components.html#buttonDropdowns），但需要輕量級的東西。基本功能是多還是少這樣的：如何正確隱藏選定的下拉菜單？

在點擊該鏈接，相應的下拉DIV打開（作品）
在點擊其他鏈接，先前的下拉關閉以及CSS類被刪除（作品）
點擊已打開的下拉菜單中的鏈接，關閉下拉菜單（不起作用（關閉並重新打開））
點擊正文中的任何位置（因此不在鏈接和下拉菜單中），關閉下拉菜單（不起作用）

這應該是什麼邏輯？

演示：http://jsfiddle.net/fU2BZ/

請問下面的代碼有意義嗎？

$(document).click(function(){ 
    $('.dropdownbox').hide(0); 
    $('.dropdown').removeClass('active'); 
}); 

$('.dropdown').click(function(event){   
    event.stopPropagation(); 
    $('.dropdown').removeClass('active'); 
    $('.dropdownbox').hide(); 
    $(this).addClass('active').find('.dropdownbox').slideToggle(200); 
});

來源

2013-05-02 Yunowork

對您的代碼做了一些更改，添加了一些if else邏輯，似乎工作。

小提琴：http://jsfiddle.net/fU2BZ/1/

代碼：

$('.dropdown').click(function(event){   
event.stopPropagation(); 

if ($(this).hasClass("active")) { 
    $('.dropdown').removeClass('active'); 
    $('.dropdownbox').hide(); 
} else { 
    $('.dropdownbox').hide(); 
    $(this).addClass('active').find('.dropdownbox').slideToggle(200); 
} 
});

來源

2013-05-02 15:39:20 tymeJV

相當不錯的，工作正常。 Up投票 – 2013-05-02 15:42:17

如果您在下拉之間切換，舊的會保留活動班級。可能想要修復那個！ – 2013-05-02 15:44:08

謝謝，相當於，有一個小錯誤，但是當你點擊打開的下拉菜單中的區域時，它會導致它太靠近，這不應該發生。 – Yunowork 2013-05-02 15:47:03

你是八九不離十。我會保存一個標誌，如果它是可見的（讓你做相同的代碼不會翻倍）

$('.dropdown').click(function(event){   
    event.stopPropagation(); 

    var active = false; 

    if ($(this).hasClass('active')) 
     active = true; 

    $('.dropdown').removeClass('active'); 
    $('.dropdownbox').hide(); 

    if (! active) 
     $(this).addClass('active').find('.dropdownbox').slideToggle(200); 
});

的jsfiddle：http://jsfiddle.net/fU2BZ/4/

來源

2013-05-02 15:42:46

感謝Christian，很好的解決方案，但是與上面的答案有相同的錯誤（當在打開的下拉菜單中點擊時，它會關閉它，這應該只發生在下拉菜單之外並且是鏈接）。 – Yunowork 2013-05-02 15:47:37

簡單的代碼來解決你的第三個問題：

$('.dropdown').click(function (event) { 
    event.stopPropagation(); 
    $('.dropdown').removeClass('active').not(this).find('.dropdownbox').hide(); 
    $(this).toggleClass('active').find('.dropdownbox').slideToggle(200); 
});

要解決你的最後一個問題，這樣做：

$('.dropdownbox').click(function (event) { 
    event.stopPropagation(); 
});

來源

2013-05-02 16:13:07

@雲諾：現在是你最後一個問題解決了嗎？ – 2013-05-02 16:31:05

感謝您解決第三個問題。關於第四個;不，再次嘗試，但仍然沒有得到它的工作.. – Yunowork 2013-05-02 18:59:20

如何正確隱藏選定的下拉菜單？

回答

相關問題