JQuery模拟单击和悬停

我有一个简单的测试CSS下拉菜单。我希望其中一个菜单是点击而不是鼠标中心，类似于Google上的“更多”链接。我已经设法用JQuery做到这一点，但是当鼠标离开时，菜单消失。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>

来源

2011-03-23 iltdev

我会做一点点不同。向隐藏菜单项的正文中添加点击处理程序。这依赖于更多链接停止传播的处理程序，以便链接不会消失，但是您已经通过从该处理程序返回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-索引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; 
}

来源

2011-03-23 12:22:55 tvanfosson

嗨tvanfosson。感谢您的建议。我现在只是通过它们，但是当鼠标移出列表时，无法让菜单2保持可见状态。 – iltdev 2011-03-23 13:07:40

@user - 只是看着你的CSS。这就是搞砸你。除了物品被徘徊时，你已经将它移开了。你需要用JavaScript代替CSS处理。 – tvanfosson 2011-03-23 13:40:42

哦，我和你在一起，'正确'的属性也需要改为'自动'。谢谢:) – iltdev 2011-03-23 14:51:26

JQuery模拟单击和悬停

回答

相关问题