在菜单外部单击时折叠菜单,但在内部单击时保持打开状态
我正尝试使用JQuery创建弹出式菜单。这个菜单显示何时点击某个元素,当然,当再次点击相同的元素时,它会崩溃。 现在我想要的是,在这个菜单打开后,当用户点击网页上的任何地方时,菜单应该关闭。我正在使用下面的代码来完成此操作。在菜单外部单击时折叠菜单,但在内部单击时保持打开状态
<script>
$(document).on('click',function(){
$('#div-header-submenu').collapse('hide');
});
现在发生的事情是,当用户点击网页上的任何地方,包括菜单自己,菜单关闭。所以,即使您尝试访问(#div-header-submeu)中的子菜单,它也会打开子菜单,但会折叠主菜单。
任何想法如何解决这种情况?为了重新迭代,我需要#div-header-submenu在主菜单中单击时保持打开状态,但如果在外部任何位置点击则会崩溃。
这是菜单的小提琴完整的标记 https://jsfiddle.net/ozbk3kLs/
感谢,
海兰, @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应该放在顶部以确保它位于布局的顶部。
希望它会帮助你:)
你可以使用一个没有选择器,因为现在你的状态本身就是“点击文档的任何地方”,所以你可以尝试一些这样
$("body:not(#div-header-submenu").on('click',function(){
$('#div-header-submenu').collapse('hide');
});
,你可以尝试这一点,看看会发生什么
不是将click事件连接到整个文档,而是将click连接到主体内的一个元素(参见下面的示例)。
只要您的标题子菜单(打开时)置于该元素的顶部(在图层中考虑),它只会'记录'点击'标题 - 子菜单'的'外部'。所以点击你的标题 - 子菜单不会触发你的关闭功能。我的意思
非常简单的例子:
<div id="container">
<div id="inner"></div>
<div id="element"></div>
</div>
您可以添加HTML标记和jQuery的其余部分,显示/隐藏菜单.. – Arty
只需添加链接到小提琴。这是jquery的标准引导 – Muhammad