Лучший способ сделать: не в jQuery?

Question

У меня есть меню в jQuery, когда вы нажимаете на ссылку, она открывается, но я хочу, чтобы при щелчке в другом месте, где-либо, кроме меню, оно скрывалось.

В данный момент я связываю событие клика с

$(':not(#the_menu)')

Но похоже, что я связываю событие щелчка со всем минусом меню, есть ли более эффективный способ сделать что-то подобное?

Answer 1

Лучший способ сделать это с помощью пузырькового захвата, например:

$(document).click(function() {
   //close menu
})

$("#the_menu").click(function(e) {
  e.stopPropagation();
});

Как это работает, каждый пузырь кликает (если вы не остановите его, обычно return false; или event.stopPopagation()), так что все, что вы нажимаете, пузырится вплоть до DOM ... если клик делает это, мы закрываем меню. Если оно пришло из внутри меню, мы остановим всплывающее окно ... чтобы щелчок не всплывал, вызывая закрытие. Этот подход использует только 2 обработчика событий вместо 1 для всего , но для меню, что очень облегчает:)

Answer 2

Как насчет привязки отображения меню к наведению на элемент, в котором оно содержится?

$("#parentId").hover(
    function() { //!! on hovering in
        $("#targetId").attr("display","block") ;
    } ,
    function() { //!! on hovering out
        $("#targetId").attr("display","none") ;
    }
) ;

Если это соответствует вашей цели, это легче поддерживать.

Answer 3

Прикрепить событие к телу документа ($(body)). Также прикрепите другое событие к #the_menu, которое является распространением события блока:

$(document.body).click(function() {
     //close menu if opened
});

$("#the_menu").click(function(e) {
     //code heere

     e.stopPropagation();
});