单击容器外部时关闭汉堡菜单

时间:2017-08-18 02:20:38

标签: jquery hamburger-menu

我想要一个非常简单的汉堡包菜单。当点击汉堡包时,我正在使用jQuery将其切换为打开和关闭。但我希望用户能够在他们点击div或菜单之外的任何地方时关闭它。

jsfiddle是我写的。不要介意造型。

我想使用像

这样的东西
$(window).on('click', function(){
    $('.responsive-menu').removeClass('expand');
})

但随着这一点的增加,我甚至无法打开菜单。请帮忙。谢谢!

2 个答案:

答案 0 :(得分:3)

诀窍是检查点击的元素是否有父.responsive-menu.menu-btn

如果它中没有任何一个并且菜单已展开,则切换!

Updated Fiddle

$(document).on("click", function(e){
  if( 
    $(e.target).closest(".responsive-menu").length == 0 &&
    $(".responsive-menu").hasClass("expand") &&
    $(e.target).closest(".menu-btn").length == 0
  ){
    $('.responsive-menu').toggleClass('expand');
  }
});

答案 1 :(得分:1)

您可以添加显示的叠加层并覆盖整个页面。

您可以添加空标记<div class="overlay"></div>并使用css隐藏它,直到您点击汉堡包按钮。然后,如果单击叠加层,则触发按钮单击。

我更新了你的小提琴: https://jsfiddle.net/nd96f398/2/