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

Question

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

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

我想使用类似

的东西

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

但是加上那个，我连菜单都打不开。请帮忙。谢谢！

Answer 1

诀窍是检查单击的元素是否有父元素 .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');
  }
});

Answer 2

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

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

我更新了你的fiddle： https://jsfiddle.net/nd96f398/2/

Answer 3

const navOpen = 
document.getElementById("nav-open);

const navMenu = 
document.getElementById("nav-menu);

document.addEventListener( "click", (e) 
=> {
if(e.target.id !== "nav-open" && 
e.target.id !== "nav-menu") {
nav menu.classList.remove("show");
}
});

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

Close the hamburger menu when you click outside of container

jquery

hamburger-menu