JQuery 模拟点击和悬停答案

【问题标题】：JQuery Simulate Click and HoverJQuery 模拟点击和悬停
【发布时间】：2011-03-23 12:12:17
【问题描述】：

我有一个带有下拉菜单的简单测试 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>

【问题讨论】：

标签： jquery css click hover

【解决方案1】：

我会做一些不同的事情。将单击处理程序添加到隐藏菜单项的主体。这依赖于处理程序的更多链接停止传播，以便链接不会消失，但您已经通过从该处理程序返回 false 来做到这一点。请注意，如果您有其他也停止传播的处理程序，您应该重构为一种通用方法，以便它们中的每一个也可以隐藏菜单。如果您可以在离开菜单时让它消失，您可以切换悬停功能，以便在不悬停在菜单项上时隐藏。

$(document).ready(function(){
    $("body").click( function() {
         $('#mainNav li ul').hide();
    });


   $("#mainNav .more a").click(function(){
      $("#mainNav li ul").css('display','block');
      $("#mainNav .more a").blur();
      return false;
   });

});

我处理它的另一种方法是在整个页面（主体的高度和宽度）上放置一个 DIV，但在使用 z-index 的菜单下。将点击处理程序附加到此 DIV 而不是正文。也就是说，除 DIV 和菜单项之外的所有元素都位于 z-index 0。DIV 位于 z-index 1 处，菜单位于 z-index 2 处（任何数字，只要它们以这种方式排序）。然后，DIV 会捕获菜单外的任何点击，从而无需其他元素了解菜单。单击时隐藏 DIV 以及菜单。代码有点多，但可能值得。

$(document).ready(function(){
    $("div.modal").click( function() {
         $('#mainNav li ul').hide();
         $('#div.modal').hide();
    });


   $("#mainNav .more a").click(function(){
      $("#mainNav li ul").show();
      $("div.modal").show();
      $("#mainNav .more a").blur();
      return false;
   });

});

HTML：

<body>
<div class="modal">&nbsp; <!-- give it some content --></div>
...

CSS：

.modal {
   z-index: 1;
   display: none;
   width: 100%;
   height: 100%;
}

.#mainNav li
{
   z-index: 2;
}

【讨论】：

嗨特万佛森。感谢您的建议。我现在只是在处理它们，但是当鼠标移出列表时，无法让菜单 2 downdown 保持可见。
@user -- 刚刚查看了您的 CSS。这就是让你陷入困境的原因。您已将其移开，除非该项目悬停。您还需要使用 javascript 而不是 CSS 来处理它。
哦，我支持你，“正确”属性也需要更改为“自动”。谢谢:)