nav标签嵌套两级子菜单,添加如下效果:当鼠标单击一级菜单时,实现二级菜单的展开或收缩
时间: 2023-12-06 13:02:59 浏览: 184
可以使用jQuery来实现这个效果。首先,为每个一级菜单绑定点击事件,然后在点击事件中判断当前二级菜单的状态,如果是展开的,则收缩,如果是收缩的,则展开。代码如下:
```html
<nav>
<ul>
<li><a href="#">一级菜单1</a>
<ul>
<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>
<li><a href="#">二级菜单4</a></li>
<li><a href="#">二级菜单5</a></li>
<li><a href="#">二级菜单6</a></li>
</ul>
</li>
</ul>
</nav>
```
```javascript
$(function() {
$('nav ul li').click(function() {
var subMenu = $(this).find('ul');
if (subMenu.is(':visible')) {
subMenu.slideUp();
} else {
subMenu.slideDown();
}
});
});
```
这段代码会监听`nav`标签下所有`li`元素的点击事件,当点击一级菜单时,会找到对应的二级菜单,判断其当前状态是展开还是收缩,然后执行相应的动画效果。
阅读全文