jQuery创建的下拉菜单的怪异行为 [英] Weird behaviour of drop down menu created by jquery
问题描述
我个人使用HTML，CSS和Amp开发了一个小的下拉菜单. jQuery的.当我运行脚本时，菜单会进入并关闭.有一个小错误，我无法弄清楚.这是我的代码.谁能看一下，告诉我如何解决.
For my personal use I develop a small dropdown menu with HTML,CSS & jquery. When I run the script then menu is coming in and going off. There is some kind of minor mistake which I am not able to figure out. Here is my code. Can anyone have a look and tell me how to fix it.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
a#plinkp
{
background: #CCC;
padding: 10px;
cursor: pointer;
margin-left: 600px;
margin-top: 200px;
position: absolute;
}
a#testll
{
background: #CCC;
padding: 10px;
cursor: pointer;
margin-left: 600px;
margin-top: 250px;
position: absolute;
}
div#HoverSubmenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 165px;
display: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
border:5px solid;
border-color:#F1F2F2;
z-index:9999;
}
div#HoverSubmenu li a
{
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration: none;
}
div#HoverSubmenu li a:hover
{
background: #39B54A;
color: #FFFFFF;
text-decoration: none;
}
.HoverRoot
{
list-style: none;
margin: 0px;
padding: 0px;
padding: 11px 0 0 0px;
border-top: 1px solid #dedede;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[id*=link]').click(function () {
//$("#link").click(function () {
$('#HoverSubmenu').insertAfter($('[id*=link]'));
$('#HoverSubmenu').css({ left: $(this).offset().left + 'px',
top: ($(this).offset().top + $(this).outerHeight()) + 'px',
position: "absolute"
});
toggleVisibility();
false;
});
$("html").click(
function (e) {
if ($(e.target).not("[id*='link']")
&& e.target.id != "HoverSubmenu"
&& e.target.className != "HoverRoot"
&& e.target.className != "HoverLI"
&& e.target.className != "atag") {
//alert(e.target.id);
$('div#HoverSubmenu').fadeOut();
}
});
function toggleVisibility() {
var submenu = $('div#HoverSubmenu');
if (submenu.is(":visible")) {
submenu.fadeOut();
} else {
submenu.fadeIn();
}
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="plinkp">About</a>
<a id="testll">My Test</a>
<%--Hover UPS Menu start--%>
<div id="HoverSubmenu">
<ul class="HoverRoot">
<li class="HoverLI"><a class="atag" href="http://www.bba-reman.com">Ship with UPS</a></li>
<li class="HoverLI"><a class="atag" href="http://www.bba-reman.com">Ship with FedEx</a></li>
</ul>
</div>
<%--Hover UPS Menu end--%>
</form>
</body>
</html>
推荐答案
尝试在'[id*=link]'点击处理程序的末尾更改此行:
Try changing this line at the end of your '[id*=link]' click handler:
false;
...成为
return false;
演示: http://jsfiddle.net/nnnnnn/tdq3d/
也许您的输入方式只是错字，而您忽略了return部分?无论如何， with return false;可以防止click事件通过DOM传播，这意味着它没有到达绑定到'html'的click处理程序. 没有 return false;，单击的确会传播，然后第二个单击处理程序将隐藏弹出菜单.
Perhaps the way you had it was just a typo that you left out the return part? Anyway, with return false; it prevents the click event from propagating up through the DOM which means it doesn't reach the click handler that you bound to 'html'. Without the return false; the click does propagate up and then that second click handler hides the popup menu.
此外，在'html'单击处理程序中，if测试没有执行您可能认为的事情.第一部分:
Also in the 'html' click handler the if test isn't doing what you probably think. The first part:
if ($(e.target).not("[id*='link']")
&& // etc
...将始终是真实的，因为 .not()方法不会返回布尔值，它返回一个jQuery对象(任何对象都是真实的).您可以通过测试对象的length属性(长度为零，则为假)来测试.not()是否返回空的jQuery对象:
...will always be truthy because the .not() method doesn't return a boolean, it returns a jQuery object (and any object is truthy). You can test whether .not() returned an empty jQuery object by testing that object's length property (a zero length will be falsy):
if ($(e.target).not("[id*='link']").length
&& // etc
我认为这也可以解决您的问题，如下所示: http://jsfiddle.net/nnnnnn /RAGNJ/3/
I think that would also fix your problem as shown here: http://jsfiddle.net/nnnnnn/RAGNJ/3/
这篇关于jQuery创建的下拉菜单的怪异行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
