jQuery菜单toggleSover悬停吗? [英] jQuery menu toggleSlide with hover?
本文介绍了jQuery菜单toggleSover悬停吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个菜单,其中只有一个项目具有子列表.这是HTML代码:
I have a menu in which only one item has a sublist. Here is the HTML code:
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Example One</a></li>
<li><a href="#">Example Two</a></li>
<li><a href="#">Example Three</a></li>
</ul>
</li>
</ul>
</div>
当鼠标位于菜单或子菜单上时,我想slideDown
并保持打开状态.因此,以下各项工作正常,但我希望将鼠标悬停在同一件事上,而不要单击.
I would like to slideDown
the menu and stay on, when the mouse is on the menu or submenu. So the following is working good, but I want the same thing with hover and not click.
$('#menu ul li').click(function() {
$('#menu ul li ul').slideToggle('slow', function() {
});
});
我尝试过将鼠标悬停,但是它有很多错误,这也是代码:
I tried with hover but it's very buggy, here is the code too:
$("#menu ul li").hover(
function () {
$("#menu ul li ul").slideDown('slow');
},
function () {
$("#menu ul li ul").slideUp('slow');
}
);
我尝试在slideDown
之后添加.stop(true, true)
或$("#menu ul li ul").css("display", "block");
,但仍然存在问题.
I tried to add .stop(true, true)
or $("#menu ul li ul").css("display", "block");
after the slideDown
but it's still buggy.
CSS
#menu ul {
list-style: none;
}
#menu ul li {
display: block;
float: left;
padding: 0;
margin: 0 30px;
}
#menu ul li a {
color: #8b4513;
text-decoration: none;
font-size: 16px;
}
#menu ul li a:hover {
text-decoration: underline;
}
#menu ul li a img {
position: relative;
top: 2px;
left: -4px;
}
#menu ul li ul {
position: absolute;
width: 151px;
height: 90px;
top: 59px;
left: 300px;
padding: 10px 0 0 0;
background: url(gfx/submenu.png) no-repeat;
z-index: 1;
}
#menu ul li ul li {
height: 27px;
float: none;
margin: 0 25px;
}
推荐答案
检查实时发布
HTML
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Example One</a></li>
<li><a href="#">Example Two</a></li>
<li><a href="#">Example Three</a></li>
</ul>
</li>
</ul>
</div>
jQuery
$("#menu ul li").hover(
function () {
$(this).children("ul").stop(true,true).slideDown('slow');
},
function () {
$(this).children("ul").stop(true,true).slideUp('slow');
}
);
这篇关于jQuery菜单toggleSover悬停吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文