Лучший способ сделать: не в jQuery?
У меня есть меню в jQuery, когда Вы нажимаете на ссылку, он открывается, но я хочу его поэтому, когда Вы нажимаете где-то в другом месте, где-либо еще который не является меню, это становится скрытым.
В данный момент я связываю событие щелчка с
$(':not(#the_menu)')
Но это кажется, что я связываю событие щелчка со всем минус меню, есть ли более эффективный способ сделать что-то вроде этого?
3 ответа
Лучший способ сделать это - использовать всплывающий захват, например:
$(document).click(function() {
//close menu
})
$("#the_menu").click(function(e) {
e.stopPropagation();
});
Это работает при каждом щелчке мышью (если вы не остановите это, обычно с помощью return false; или event.stopPopagation () ), поэтому все, что вы щелкаете пузырьками, вплоть до DOM. ..если это произойдет, мы закроем меню. Если он пришел из внутри меню, мы останавливаем всплывающее окно ... чтобы щелчок не всплывал, вызывая закрытие. Этот подход использует только 2 обработчика событий вместо 1 для всего , но меню, поэтому очень легкое :)
Присоединить событие к телу документа ( $ (body) ). Также прикрепите другое событие к #the_menu , которое блокирует распространение события:
$(document.body).click(function() {
//close menu if opened
});
$("#the_menu").click(function(e) {
//code heere
e.stopPropagation();
});
Как насчет привязки отображения меню к наведению курсора на элемент, в котором оно содержится?
$("#parentId").hover(
function() { //!! on hovering in
$("#targetId").attr("display","block") ;
} ,
function() { //!! on hovering out
$("#targetId").attr("display","none") ;
}
) ;
Если это соответствует вашей цели, это кажется более простым в обслуживании.