Question

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

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

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

}）;

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

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

谢谢，

Answer 1

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



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

Answer 2

你可以使用not selector，因为现在你的条件本身是“点击文档的任何地方”，所以你可以尝试这样的事情

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

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

你可以尝试一下，看看会发生什么

Answer 3

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

只要您的标题子菜单（打开时）放在顶部＆＃39;该元素（在图层中思考），它只会记录＆＃39;点击＆＃39;外面＆＃39;你的头 - 子菜单。因此，在标题子菜单中的点击不会触发关闭功能。

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

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

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

Answer 4

HY， @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应该是最重要的，以确保它位于布局的顶部。

希望它会对你有所帮助:)。

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

4 个答案: