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

我正尝试使用JQuery创建弹出式菜单。这个菜单显示何时点击某个元素，当然，当再次点击相同的元素时，它会崩溃。现在我想要的是，在这个菜单打开后，当用户点击网页上的任何地方时，菜单应该关闭。我正在使用下面的代码来完成此操作。在菜单外部单击时折叠菜单，但在内部单击时保持打开状态

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

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

}）;

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

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

感谢，

来源

2016-04-29 Muhammad

您可以添加HTML标记和jQuery的其余部分，显示/隐藏菜单.. – Arty

只需添加链接到小提琴。这是jquery的标准引导 – Muhammad

海兰， @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应该放在顶部以确保它位于布局的顶部。

希望它会帮助你:)

来源

2016-04-29 10:47:34

另外，您可以尽情享受完整的CSS：p –

如何在CSS中执行此操作？ – Muhammad

所以这一个工作！非常感谢！ – Muhammad

你可以使用一个没有选择器，因为现在你的状态本身就是“点击文档的任何地方”，所以你可以尝试一些这样

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

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

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

来源

2016-04-29 10:23:50

嗨达瓦尔，它不工作。我的意思是，它不会关闭菜单，无论您是在潜水中还是在潜水之外点击。 – Muhammad

理想情况下，当菜单打开时，您应该有一个动态附加的类，然后当您将该类远离它时，它应该关闭。打开按钮上的点击事件应该添加一个类似打开的类，并且当它在外部点击时那个班级应该取下 –

你能否请一个例子详细说明一下？ – Muhammad

不是将click事件连接到整个文档，而是将click连接到主体内的一个元素（参见下面的示例）。

只要您的标题子菜单（打开时）置于该元素的顶部（在图层中考虑），它只会'记录'点击'标题 - 子菜单'的'外部'。所以点击你的标题 - 子菜单不会触发你的关闭功能。我的意思

非常简单的例子：

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

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

来源

2016-04-29 10:34:07 Airrudi

所以，如果我正确理解这一点，你是说点击应该连接到身体内的任何股利？ – Muhammad

我已经添加了一个基本的jsfiddle我的意思 – Airrudi

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



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

来源

2016-04-29 10:37:49

似乎没有工作:) – Muhammad

你可以分享你的网址，在小提琴它看起来像一个废话 –

它还没有生活。它在我的本地系统上。 – Muhammad

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

回答

相关问题