由jquery创建的下拉菜单的奇怪行为

为了个人用途，我开发了一个包含HTML，CSS和jquery的小型下拉菜单。 当我运行脚本时，菜单进入和退出。 有一些小错误，我无法弄清楚。 这是我的代码。 任何人都可以看看，并告诉我如何解决它。

    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; }    $(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(); } } });    
 About My Test  
 
 
Ship with UPS
 
Ship with FedEx
 
 
  
   

Answer 1

尝试在'[id*=link]'点击处理程序的末尾更改此行：

 false; 

…成为

 return false; 

演示： http ： //jsfiddle.net/nnnnnn/tdq3d/

也许你拥有它的方式只是一个错误，你遗漏了return部分？ 无论如何， return false; 它可以防止click事件通过DOM传播，这意味着它不会到达你绑定到'html'的点击处理程序。 没有 return false; 点击确实传播，然后第二个点击处理程序隐藏弹出菜单。

同样在'html'点击处理程序中， if测试没有做你想象的那样。 第一部分：

  if ($(e.target).not("[id*='link']") && // etc 

…将始终是真实的，因为.not .not()方法不返回布尔值，它返回一个jQuery对象（并且任何对象都是真实的）。 您可以通过测试该对象的length属性（零长度将是假的）来测试.not .not()是否返回了一个空的jQuery对象：

  if ($(e.target).not("[id*='link']").length && // etc 

我认为这也可以解决您的问题，如下所示： http ： //jsfiddle.net/nnnnnn/RAGNJ/3/