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

单击某个特定按钮时会打开一个菜单#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'); 
    } 
    }); 
});

来源

2015-04-21 DWTBC

'$（ '身体*：不是（' ＃BTN '）'）被解雇了。点击（函数（）{}）' –

分配事件听众文件，检查事件目标是不是菜单关闭所述菜单，我猜... – Xufox

做这个

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

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

来源

2015-04-21 13:20:15

除了当前的代码或代替当前的代码吗？ – DWTBC

加入此代码你想要这样的东西 https://jsfiddle.net/rkapkoLu/2/ ?? –

是的！谢谢 – DWTBC

-2

我会极力推荐的jQuery outsideevents http://benalman.com/projects/jquery-outside-events-plugin/

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

它确实找到一切的 “不是按钮” 为您的所有工作。

我还要提到它比clickoutside多了很多，比如你可以检查他们是否focusoutside也因此，如果他们使用标签快捷键来浏览网页的菜单仍然关闭，等

来源

2015-04-21 13:10:51 dman2306

形式胜过内容。你可以做同样的事情（查看源代码），不需要插件。 –

不可以，不可以，不可以，不可以 –

当然你也可以不使用这个插件来做同样的事情。插件仅仅是代码，所以任何插件都可以在没有插件的情况下完成。但是，我的观点是您可以更轻松地使您的应用程序更健壮。例如，仅当有人在外面点击时关闭菜单对屏幕阅读器来说不太合适。你应该处理标签，焦点等等。像“没有，不会，不会，不会的”这样的回答不会增加讨论的价值。如何提供理由为什么这是一个糟糕的主意，因为我已经说明了为什么它比其他提议更好。 – dman2306

您可以简单地设置监听器在身上

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

来源

2015-04-21 13:13:02

我试过了，但是之后又关闭了菜单。看到这个小提琴：https://jsfiddle.net/rkapkoLu/1/ – DWTBC

对不起，身体意味着整个文件。你需要识别响应点击的元素。我已经更新了答案。 –

通过这样做，它看起来像我也能够通过点击'.image'类 – DWTBC

你真的想在点击不是#btn按钮的东西后有动作。

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

不要忘了事后的卸装事件。

来源

2015-04-21 13:14:31

使用onblur事件。它的onfocus的对面，当元素失去焦点

onblur

来源

2015-04-21 13:26:10 bangde

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

回答

相关问题