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/