Question

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

Answer 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;
}

JQuery Simulate Click and Hover

1 个答案: