在菜单外部单击时折叠菜单，但在内部单击时保持打开状态答案

【问题标题】：Collapse a menu when clicked outside the menu, but keep it open when clicked inside在菜单外部单击时折叠菜单，但在内部单击时保持打开状态
【发布时间】：2016-04-29 10:11:06
【问题描述】：

我正在尝试使用 JQuery 创建一个弹出菜单。此菜单显示单击某个元素的时间，当然，当再次单击同一元素时，它会折叠。现在我想要的是，在打开此菜单后，当用户单击网页上的任何位置时，菜单应该关闭。我正在使用以下代码来完成此操作。

<script>
$(document).on('click',function(){

$('#div-header-submenu').collapse('hide');

});

现在发生的情况是，当用户单击网页上的任何位置（包括菜单本身）时，菜单会关闭。因此，即使您尝试访问 (#div-header-submeu) 中的子菜单，它也会打开子菜单，但会折叠主菜单。
任何想法如何解决这种情况？只是为了重新迭代，我需要 #div-header-submenu 在主菜单内单击时保持打开状态，但如果单击外部任何位置则折叠。

这是菜单的 Fiddle 完整标记 https://jsfiddle.net/ozbk3kLs/

谢谢，

【问题讨论】：

你能添加你的 HTML 标记和显示/隐藏菜单的 jQuery 的其余部分吗..
刚刚添加了指向小提琴的链接。它是 jquery 的标准引导程序

标签： jquery css

【解决方案1】：

<div class='menu'></div>



    $('body').on('click',function(){
       if(!$(this).hasClass('menu'))
       $('#div-header-submenu').collapse('hide');
    });

【讨论】：

你能分享你的网址吗，小提琴看起来像废话
它还没有上线。它在我的本地系统上。

【解决方案2】：

嘿， @Dhaval Chhenda 答案应该有效。另一种思路是将所有页面内容包装在一个

<div id="main">...</div> <menu>...</menu>

在它之外有你的菜单。然后在主标签上调用on('click') 方法，如下所示：https://api.jquery.com/click/

这会给你类似的东西

html：

<body> <div id=main> Content </div> <menu> menu </menu> </body>

javascript：

$( "#main" ).click(function() { $('#div-header-submenu').collapse('hide'); });

css:

menu { z-index: 100; }

z-index 应该被置顶以确保它位于布局的顶部。

希望对你有帮助:)

【讨论】：

另外，你可以在完整的 css 中玩得开心：p
如何在 css 中做到这一点？
在 css 中有点棘手：您必须创建一个带有标签的复选框，该标签将覆盖主 div 并使用继承 (~) 属性。但是，如果您在主 div 中有链接，则不能这样做，因为布局将位于布局的顶部 :)。

【解决方案3】：

您可以使用非选择器，因为现在您的条件本身是“单击文档上的任意位置”，因此您可以尝试这样的操作

$("body:not(#div-header-submenu").on('click',function(){

$('#div-header-submenu').collapse('hide');
});

你可以试试这个看看会发生什么

【讨论】：

嗨 Dhaval，它不工作。我的意思是，无论您在潜水内部还是外部单击，它都不会关闭菜单。
理想情况下，当菜单打开时，您应该有一个动态附加到它的类，然后当您将该类从它拿走时，它应该关闭..打开按钮上的单击事件应该添加一个类打开，当它在外面点击时，应该取消该类
你能举个例子吗？

【解决方案4】：

您可以将点击连接到正文中的元素（参见下面的示例），而不是将点击事件连接到整个文档。

只要您的标题子菜单（打开时）位于该元素的“顶部”（分层考虑），它只会“记录”标题子菜单“外部”的点击。因此，在您的标题子菜单内单击不会触发您的关闭功能。

我的意思的非常基本的例子：

<div id="container">
  <div id="inner"></div>
  <div id="element"></div>
</div>

https://jsfiddle.net/Airrudi/awndqe1t/

【讨论】：

所以如果我理解正确的话，你是说点击应该连接到正文中的任何 div？
我添加了一个基本的 jsfiddle 来表达我的意思