如何通过单击打开按钮区域外部来关闭菜单

Question

单击特定按钮时会打开一个菜单#btn。

我想通过单击按钮外部来关闭菜单。

这是小提琴：https://jsfiddle.net/maryisdead/rkapkoLu/

这可能吗？

这是javascript：

(function() {
  var btn       = $('#btn');
  menu      = $('nav ul');
  menuHeight    = menu.height();
  $(btn).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
  });
  $(window).resize(function(){
    var w = $(window).width();
    if(w > 320 && menu.is(':hidden')) {
      menu.removeAttr('style');
    }
  });
});

Answer 1

您实际上希望在单击不是按钮#btn内容后进行操作。

$( document ).ready(function(){
  $('body *').not('#btn').click(function(){
     e.preventDefault();
     menu.slideToggle();
  })
});

之后不要忘记取消附加事件。

Answer 2

这样做

    $('html').click(function() {
menu.slideUp();
});
$('.nav-wrapper').click(function(event){
    event.stopPropagation();
});

Answer 3

您可以简单地在正文上设置侦听器

        $(".image").on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });

Answer 4

使用 onblur 事件。它与对焦相反，当元素失去焦点时会触发

onblur

Answer 5

我强烈推荐jQuery outsideevents http://benalman.com/projects/jquery-outside-events-plugin/

$(btn).bind("clickoutside", function(event){ // Code to hide your menu. });

它完成了为您找到"不是按钮"的所有内容的所有工作。

我还应该提到它比单击外部做得更多，就像您可以检查它们是否也聚焦在外部，因此如果他们使用选项卡快捷方式导航页面，菜单仍然会关闭，等等。