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

Posted 2023-04-13

【中文标题】单击容器外部时关闭汉堡菜单

【英文标题】：Close the hamburger menu when you click outside of container

【发布时间】：2018-01-26 14:28:12

【问题描述】：

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

jsfiddle 是我写出来的。不要介意样式。

我想使用类似的东西

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

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

【问题讨论】：

我们可以看看您的其余代码以及您如何集成这些行吗？

你能详细说明“div 之外的任何地方”是什么意思吗？如果用户单击页面上的链接或按钮，您是否希望菜单关闭？您是否考虑过将宽度和高度为 100% 的不可见层分层，激活该 onclick，然后将暴露的菜单放在其上？

@DavyM 线条是纯css

@TonyD 所以如果用户点击汉堡图标，菜单就会打开。如果他们点击页面上的任意位置，不一定是链接或按钮，菜单将关闭。

这可能有帮助吗？ ***.com/questions/8800515/…

【参考方案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');
  
);

【讨论】：

嘿！谢谢您的答复。我从没想过这样一个简单的案例会奏效。完全有道理！

很高兴能提供帮助 ;)

【参考方案2】：

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

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

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

【讨论】：

嘿！这也很有效。我会记住这一点！谢谢