Question

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

我希望关闭菜单，同时点击按钮外部。

以下是FIDDLE：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

您只需在正文上设置侦听器

即可

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

Answer 3

这样做

    $('html').click(function() {
menu.slideUp();
});

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

Answer 4

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

onblur

Answer 5

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

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

它完成了为你找到“不是按钮”的所有工作。

我还应该提一下，它比clickoutside更多，比如你可以检查它们是否也是如此，如果他们使用选项卡快捷键导航页面菜单仍然关闭等等。

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

5 个答案: