Question

当你点击它打开的链接时，我在jQuery中有一个菜单，但我想要它，所以当你点击其他地方，在其他不是菜单的地方时，它就会被隐藏。

目前我正在将点击事件绑定到

$(':not(#the_menu)')

但是这似乎是我将点击事件绑定到整个减去菜单，是否有更有效的方法来做这样的事情？

Answer 1

执行此操作的最佳方法是使用冒泡捕获，如下所示：

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

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

这是如何工作的每一次点击气泡（除非你停止它，通常是return false;或event.stopPopagation()），所以无论你点击气泡一直到DOM ...如果点击这样做，我们关闭菜单。如果它来自 inside 菜单，我们会停止泡泡...所以点击不会冒泡，触发关闭。这种方法在但菜单上只使用了2个事件处理程序而不是1个，因此非常轻量级：）

Answer 2

将事件附加到文档正文（$(body)）。同时将另一个事件附加到阻止事件传播的#the_menu：

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

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

     e.stopPropagation();
});

Answer 3

如何将菜单显示绑定到将鼠标悬停在包含它的元素上？

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

如果符合您的目标，这似乎更容易维护。

最好的方法：不是在jQuery中？

3 个答案: