jQuery - 點擊新div時隱藏其他div

Question

我已經編寫了這段代碼，當點擊另一個div時顯示一個菜單（div）。問題是，當我打開其中一個菜單，然後單擊div打開一個新菜單（有多個循環菜單）時，其他菜單不會關閉。這意味着我可以同時打開無限數量的菜單，只要我不點擊div /菜單外...

短：我想要所有打開的菜單div隱藏，當點擊打開一個新的菜單，除了從我剛纔打開的菜單......

代碼：我相信所有菜單

$('.commentSettings').click(function(e) { 
    var id = $(this).attr('id'); 
    $('#mod-dropdown' + id).stop().toggle(200); 
    e.stopPropagation(); 
    $('#mod-dropdown' + id).show(); 

    $(document).click(function(){ 
     $("#mod-dropdown" + id).hide(); 
    }); 
}); 

Answer 1

如果你給所有的divs你想隱藏一個類，例如menu，那麼你可以在點擊功能開始時彈出$('.menu').hide();。

請注意，你有一個文件準備在功能內，我不認爲你想把那裏。 document.ready函數應該總是先出現，然後在其中註冊您的事件處理程序。

Answer 2

有一個共同的類。先使用此功能關閉所有菜單。然後打開當前點擊的那個。

Answer 3

你可以有這樣的事情：

var id = -1; 
$('.commentSettings').click(function(e) { 
    if(id != -1) 
     $('#mod-dropdown' + id).hide(); 
    var id = $(this).attr('id'); 
    $('#mod-dropdown' + id).stop().toggle(200); 
    e.stopPropagation(); 
    $('#mod-dropdown' + id).show(); 

    $(document).click(function(){ 
     $("#mod-dropdown" + id).hide(); 
    }); 
}); 

Answer 4

這應該工作：

$('.commentSettings').click(function(e) { 
    var id = $(this).attr('id'); 
    $('#mod-dropdown' + id).stop().toggle(200); 
    e.stopPropagation(); 
    $('#mod-dropdown' + id).show(); 
}); 

$(document).click(function(){ 
    $('[id^="#mod-dropdown"]').hide(); 
}); 

我在這裏使用jQuery的attributeStartsWith選擇。

更多信息，你可以在這裏找到：http://api.jquery.com/attribute-starts-with-selector/