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

Question

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

jsfiddle是我写出来的。别介意造型。

我想用类似的东西

$(window).on('click', function(){
    $('.responsive-menu').removeClass('expand');
})

但添加后，我什至无法打开菜单。请帮忙。谢谢你！

Answer 1

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

如果没有两者中的任何一个并且菜单已展开，请切换！

更新了小提琴

$(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');
  }
});