jQuery mouseover 和 mouseleave 下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16519267/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery mouseover and mouseleave drop down menus
提问by dora
The following displays a menu:
下面显示一个菜单：
<a href="#" id="cityclick">ONZE WAARDEN</a>
<div id="citydrop">
<div class="dropbottom">
<div class="dropmid">
<ul>
<li><a href="#">FAQ</a>
</li>
<li><a href="#">ITC</a>
</li>
<li><a href="#">CLUB</a>
</li>
<li><a href="#">CULTUUR</a>
</li>
<li><a href="#">ROBITICA</a>
</li>
</ul>
</div>
</div>
</div>
The jQuery for is as follows :
jQuery for 如下：
$("#citydrop").hide();
$("#cityclick").mouseover(function () {
$("#citydrop").slideDown('slow');
});
$("#citydrop").mouseleave(function () {
$("#citydrop").slideUp('slow');
});
PROBLEM:I'm not able to figure out how to toggle the submenu "citydrop" when the mouse leaves "cityclick" but does not enter "citydrop" yet.
问题：当鼠标离开“cityclick”但尚未进入“citydrop”时，我无法弄清楚如何切换子菜单“citydrop”。
I tried out here jsfiddle
我在这里尝试了jsfiddle
采纳答案by Kasyx
Use some wrapper on your html, and then call mouseleaveevent on it, like there: http://jsfiddle.net/9yEHV/11/
在您的 html 上使用一些包装器，然后mouseleave在其上调用事件，例如：http: //jsfiddle.net/9yEHV/11/
$("#wrapper").mouseleave(function () {
$("#citydrop").slideUp('slow');
});
And wrapper:
和包装：
<div id="wrapper">
<a href="#" id="cityclick" >ONZE WAARDEN</a>
<!-- rest of your code -->
</div>
回答by Tan Nguyen
Is this what you are trying to do?
这是你想要做的吗？
HTML
HTML
<ul>
<li class="main-menu">
ONZE WAARDEN
<ul class="sub-menu" style="display: none;">
<li><a href="#">FAQ</a></li>
<li><a href="#">ITC</a></li>
<li><a href="#">CLUB</a></li>
<li><a href="#">CULTUUR</a></li>
<li><a href="#">ROBITICA</a></li>
</ul>
</li>
</ul>
Javascript
Javascript
$('.main-menu').mouseenter(function(){
$(this).find('.sub-menu').slideDown();
});
$('.main-menu').mouseleave(function(){
$(this).find('.sub-menu').slideUp();
});
回答by veeresh
hover plugin includes both mouseenter and mouseleave follwing code works fine for me
悬停插件包括 mouseenter 和 mouseleave 以下代码对我来说很好用
javascript:
javascript:
$(document).ready(function(){
$('.dropdown').hover(
function(){
$(this).children('.dropdown-menu.pricing-drop').slideDown('fast');
},
function () {
$(this).children('.dropdown-menu.pricing-drop').slideUp('fast');
});
});
回答by Mac D'zen
$(document).ready(function () {
$('#Dropdown').mouseover(function () {
$(this).slideDown();
});
});
$(document).ready(function () {
$('#Dropdown').mouseleave(function () {
$(this).slideup();
});
});
i think this might help..
我认为这可能会有所帮助..
