jQuery如何绑定和取消绑定到窗口但附加到元素？

Question

我正在构建一个下拉菜单。当您单击箭头时，下拉菜单会打开。

当菜单打开时，我想在菜单项单击或文档模糊时关闭菜单。但似乎我不想像这样绑定以下内容：

$(document.body).bind('click',function(e) {
    if(menuopen) {

因为这将仅跟踪菜单的所有点击。有没有办法让这个绑定在菜单打开时才起作用，在菜单关闭时解除绑定？

谢谢

Answer 1

这样的事情怎么样？

$(document.body).on("click blur", function () {
  $("div.dropdown.open").removeClass("open");
})

$("div.dropdown div.arrow").on("click", function () {
  $(this).closest("div.dropdown").addClass("open");
})

这是假设添加.open CSS 类会显示菜单，而删除它会隐藏菜单。

请注意，.on() 从 jQuery 1.7 开始可用。早期版本使用.bind() 或.delegate() 达到相同的效果。