因此,我有一个下拉菜单,可以根据业务需求在单击时显示。将鼠标从菜单上移开后,该菜单将再次隐藏。
但现在我被要求将它留在原处,直到用户单击文档上的任何位置。如何才能做到这一点?
这是我现在所拥有的简化版本:
$(document).ready(function() {
$("ul.opMenu li").click(function(){
$('#MainOptSubMenu',this).css('visibility', 'visible');
});
$("ul.opMenu li").mouseleave(function(){
$('#MainOptSubMenu',this).css('visibility', 'hidden');
});
});
<ul class="opMenu">
<li id="footwo" class="">
<span id="optImg" style="display: inline-block;"> <img src="http://localhost.vmsinfo.com:8002/insight/images/options-hover2.gif"/> </span>
<ul id="MainOptSubMenu" style="visibility: hidden; top: 25px; border-top: 0px solid rgb(217, 228, 250); background-color: rgb(217, 228, 250); padding-bottom: 15px;">
<li>some</li>
<li>nav</li>
<li>links</li>
</ul>
</li>
</ul>
我尝试了像这样的$('document[id!=MainOptSubMenu]').click(function()
,以为它会在菜单之外的任何东西上触发,但它不起作用。
发布于 2013-03-23 01:13:38
答案是正确的,但它将添加一个侦听器,该侦听器将在每次单击页面时触发。为了避免这种情况,您可以只添加一次监听器:
$('a#menu-link').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$('#menu').toggleClass('open');
$(document).one('click', function closeMenu (e){
if($('#menu').has(e.target).length === 0){
$('#menu').removeClass('open');
} else {
$(document).one('click', closeMenu);
}
});
});
编辑:如果你想避免初始按钮上的stopPropagation()
,你可以使用这个
var $menu = $('#menu');
$('a#menu-link').on('click', function(e) {
e.preventDefault();
if (!$menu.hasClass('active')) {
$menu.addClass('active');
$(document).one('click', function closeTooltip(e) {
if ($menu.has(e.target).length === 0 && $('a#menu-link').has(e.target).length === 0) {
$menu.removeClass('active');
} else if ($menu.hasClass('active')) {
$(document).one('click', closeTooltip);
}
});
} else {
$menu.removeClass('active');
}
});
发布于 2010-05-20 05:25:56
如果在您的情况下使用插件是可以的,那么我建议Ben Alman的clickoutside插件位于here
它的用法就像这样简单:
$('#menu').bind('clickoutside', function (event) {
$(this).hide();
});
希望这能有所帮助。
发布于 2013-07-24 22:59:23
我找到了Grsmto's solution的一个变体,Dennis' solution解决了我的问题。
$(".MainNavContainer").click(function (event) {
//event.preventDefault(); // Might cause problems depending on implementation
event.stopPropagation();
$(document).one('click', function (e) {
if(!$(e.target).is('.MainNavContainer')) {
// code to hide menus
}
});
});
https://stackoverflow.com/questions/2868582
复制相似问题