jQuery - Скрыть другие divs при нажатии нового div

Question

Я написал этот код, который показывает меню (div) при нажатии другого div. Проблема в том, что когда у меня открыто одно из меню, и нажмите на div, чтобы открыть новое меню (несколько меню замкнуты), другие меню не закрываются. Это означает, что я могу открывать неограниченное количество меню одновременно, пока я не выхожу за пределы div/menu ...

Короткие: я хочу, чтобы все открытые разделители меню спрятались при нажатии, чтобы открыть новое меню, за исключением меню я только что открыл ...

Код:

$('.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

Если вы дадите все div, вы хотите скрыть класс, например 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/