jQuery 菜单切换滑动并悬停?
我有一个菜单,其中只有一项有子列表。以下是 HTML 代码:
<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
菜单并保持不动。因此,以下内容运行良好,但我希望悬停而不是单击也能实现相同的效果。
$('#menu ul li').click(function() {
$('#menu ul li ul').slideToggle('slow', function() {
});
});
我尝试使用悬停,但它非常有问题,这也是代码:
$("#menu ul li").hover(
function () {
$("#menu ul li ul").slideDown('slow');
},
function () {
$("#menu ul li ul").slideUp('slow');
}
);
我尝试添加 .stop(true, true)
或 $("#menu ul li ul").css( "display", "block");
在 slideDown
之后,但它仍然有问题。
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;
}
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>
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');
}
);
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;
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
检查实时
HTML
Jquery
Check it out live
HTML
Jquery
每次鼠标移到元素上时都会触发悬停。使用输入/离开代替:
Hover is triggered everytime the mouse moves over the element. Use enter/leave instead :
小提琴演示:http://jsfiddle.net/ZMLyz/
Fiddle Demo: http://jsfiddle.net/ZMLyz/