用jQuery写一个二级菜单 ,功能包括(鼠标经过二级菜单显示,离开隐藏)
时间: 2023-12-18 12:05:48 浏览: 28
HTML代码如下:
```html
<ul class="menu">
<li><a href="#">菜单1</a>
<ul class="submenu">
<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="submenu">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
</ul>
```
CSS代码如下:
```css
.submenu {
display: none;
}
```
jQuery代码如下:
```javascript
$(document).ready(function() {
$('.menu > li').hover(
function() {
$(this).find('.submenu').slideDown(300);
},
function() {
$(this).find('.submenu').slideUp(300);
}
);
});
```
解释一下:
首先,我们用CSS将二级菜单隐藏起来。然后,我们使用jQuery在鼠标经过时显示二级菜单,在鼠标离开时隐藏二级菜单。我们使用了`hover`方法,该方法接受两个函数作为参数,第一个函数是当鼠标经过时执行的函数,第二个函数是当鼠标离开时执行的函数。在每个函数内部,我们使用`find`方法查找该菜单项下的二级菜单,然后使用`slideDown`和`slideUp`方法分别显示和隐藏二级菜单。`slideDown`和`slideUp`方法接受一个参数,表示动画的速度。