Jquery实现鼠标悬停显示二级菜单
时间: 2024-03-01 08:50:24 浏览: 87
您的问题是如何使用jQuery实现鼠标悬停显示二级菜单,对吗?
以下是一个简单的示例代码,可以帮助您实现这个效果:
HTML代码:
```
<ul class="menu">
<li><a href="#">菜单1</a>
<ul class="sub-menu">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单2</a>
<ul class="sub-menu">
<li><a href="#">子菜单4</a></li>
<li><a href="#">子菜单5</a></li>
<li><a href="#">子菜单6</a></li>
</ul>
</li>
<li><a href="#">菜单3</a></li>
</ul>
```
CSS代码:
```
.menu {
list-style: none;
padding: 0;
margin: 0;
}
.menu > li {
display: inline-block;
position: relative;
}
.menu > li > a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #f5f5f5;
border: 1px solid #ddd;
padding: 10px;
z-index: 1;
}
.sub-menu > li > a {
display: block;
text-decoration: none;
color: #333;
}
.menu > li:hover .sub-menu {
display: block;
}
```
jQuery代码:
```
$(document).ready(function() {
$('.menu li').hover(function() {
$(this).find('.sub-menu').stop().slideDown(200);
}, function() {
$(this).find('.sub-menu').stop().slideUp(200);
});
});
```
解释一下上面的代码:
1. 首先定义了一个ul列表,每个列表项li对应一个菜单项。
2. 每个菜单项li中包含一个a链接和一个子菜单ul,子菜单ul中包含了该菜单项对应的二级菜单。
3. 子菜单ul默认设置为display: none,即不显示。
4. 当鼠标悬浮到某个菜单项li上时,通过jQuery的hover()方法选中该菜单项下方的子菜单ul,并使用slideDown()方法使其向下展开,即显示出来。
5. 当鼠标移开时,使用slideUp()方法使子菜单ul向上收起,即隐藏起来。
您可以根据具体的需求,调整CSS样式和jQuery代码,实现您想要的效果。
阅读全文