JQuery 模拟点击和悬停
我有一个带有下拉菜单的简单测试 CSS 菜单。我希望其中一个菜单是点击而不是鼠标输入 - 类似于 Google 上的“更多”链接。 我已经设法用 JQuery 做到这一点，但是当鼠标离开时，菜单就会消失。
如何强制保留下拉菜单，直到用户单击屏幕上的其他位置，就像在 Google 上一样？
这是我的测试脚本：
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$("#mainNav .more").hover(
function () {
$("#mainNav li ul").css('display','none');
},
function () {
});
$("#mainNav .more a").click(function(){
$("#mainNav li ul").css('display','block');
$("#mainNav .more a").blur();
return false;
});
});
</script>
<style>
/*TOP LEVEL*/
#mainNav, #mainNav ul {padding: 0;margin: 0;list-style: none;list-style-image:none;}
#mainNav li a {display: block;padding:4px;margin-right:15px;color:#000;font-weight:bold;font-size:0.9em;}
#mainNav li {float: left;list-style: none;list-style-image:none;margin:0;}
#mainNav li a:hover{color:#ff000;text-decoration:none;}
/*DROPDOWN*/
#mainNav li ul {position: absolute;background-color: #eee;right: -999em;}
#mainNav li ul li{width:100%;margin:2px 0px 2px 0px;border:none;}
#mainNav li:hover ul { /*POPUP/DROPDOWN*/
right:auto;
}
#mainNav li li a{width:100%;font-weight:normal;}
#mainNav li li a:hover{font-weight:bold;color:#000;}
#mainNav li li a, #mainNav li li a:visited {margin:0;padding-left:16px;padding-top:7px;padding-bottom:7px;}
</style>
</head>
<body>
<ul id="mainNav">
<li><a href="">Home</a></li>
<li><a href="">Menu 1 (Mouseover)</a>
<ul>
<li><a href="">1.1</a></li>
<li><a href="">1.2</a></li>
</ul>
</li>
<li class="more"><a href="">Menu 2 (Click)</a>
<ul>
<li><a href="">2.1</a></li>
<li><a href="">2.2</a></li>
</ul>
</li>
</ul>
</body>
</html>
I have a simple test css menu with dropdowns. I want one of the menus to be a click rather than mouseenter - similar to the 'more' link on Google.
I've managed to do this with JQuery, but when the mouse leaves, the menu disappears.
How can I force the dropdown to remain until the user click somewhere else on screen, just like on Google?
Here is my test script:
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$("#mainNav .more").hover(
function () {
$("#mainNav li ul").css('display','none');
},
function () {
});
$("#mainNav .more a").click(function(){
$("#mainNav li ul").css('display','block');
$("#mainNav .more a").blur();
return false;
});
});
</script>
<style>
/*TOP LEVEL*/
#mainNav, #mainNav ul {padding: 0;margin: 0;list-style: none;list-style-image:none;}
#mainNav li a {display: block;padding:4px;margin-right:15px;color:#000;font-weight:bold;font-size:0.9em;}
#mainNav li {float: left;list-style: none;list-style-image:none;margin:0;}
#mainNav li a:hover{color:#ff000;text-decoration:none;}
/*DROPDOWN*/
#mainNav li ul {position: absolute;background-color: #eee;right: -999em;}
#mainNav li ul li{width:100%;margin:2px 0px 2px 0px;border:none;}
#mainNav li:hover ul { /*POPUP/DROPDOWN*/
right:auto;
}
#mainNav li li a{width:100%;font-weight:normal;}
#mainNav li li a:hover{font-weight:bold;color:#000;}
#mainNav li li a, #mainNav li li a:visited {margin:0;padding-left:16px;padding-top:7px;padding-bottom:7px;}
</style>
</head>
<body>
<ul id="mainNav">
<li><a href="">Home</a></li>
<li><a href="">Menu 1 (Mouseover)</a>
<ul>
<li><a href="">1.1</a></li>
<li><a href="">1.2</a></li>
</ul>
</li>
<li class="more"><a href="">Menu 2 (Click)</a>
<ul>
<li><a href="">2.1</a></li>
<li><a href="">2.2</a></li>
</ul>
</li>
</ul>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我会做得有点不同。将单击处理程序添加到隐藏菜单项的主体。这依赖于更多链接停止传播的处理程序，以便链接不会消失，但您已经通过从该处理程序返回 false 来做到这一点。请注意，如果您有其他处理程序也停止传播，则应重构为一种通用方法，以便它们中的每个处理程序也可以隐藏菜单。如果您同意每次离开菜单时它都会消失，您可以切换悬停功能，以便在不悬停在菜单项上时它会隐藏。
我处理它的另一种方法是在整个页面（主体的高度和宽度）上放置一个 DIV，但在菜单下使用 z-index。将单击处理程序附加到此 DIV 而不是主体。也就是说，除了 DIV 和菜单项之外的所有元素都位于 z-index 0。DIV 位于 z-index 1，菜单位于 z-index 2（任何数字，只要按这种方式排序即可）。然后，DIV 捕获菜单外部的任何点击，从而无需其他元素了解菜单。单击后，您将隐藏 DIV 和菜单。代码有点多，但可能是值得的。
HTML：
CSS：
I would do it a little bit different. Add a click handler to the body that hides the menu items. This relies on the handler for the more link stopping propagation so that the link doesn't disappear, but you're already doing that by returning false from that handler. Note that if you have other handlers that also stop propagation, you should refactor to a common method so that each one of them can hide the menu as well. If you were ok with it going away whenever you go outside the menu, you could switch your hover functions around so that it gets hidden when not hovering over menu items.
Another way I've handled it is to also put up a DIV over the whole page (height and width of body), but under the menu using z-index. Attach the click handler to this DIV instead of the body. That is, all elements except the DIV and the menu items are at z-index 0. The DIV is at z-index 1 and the menu at z-index 2 (any numbers as long as they are ordered this way). The DIV then catches any clicks outside the menu removing the need for other elements to know about the menu. On click you hide the DIV as well as the menu. It's a little bit more code, but probably worth it.
HTML:
CSS: