折叠菜单jq
时间: 2024-01-31 17:06:00 浏览: 31
折叠菜单可以使用 jQuery 插件来实现,以下是一个简单的示例代码:
HTML:
```html
<ul class="menu">
<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="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li>
<a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
</ul>
```
CSS:
```css
.menu ul {
display: none;
}
```
jQuery:
```javascript
$(document).ready(function() {
$('.menu li').click(function() {
$(this).children('ul').slideToggle();
});
});
```
上述代码中,我们给菜单的父元素 li 添加了一个点击事件,当点击时,我们使用 jQuery 的 slideToggle() 方法来实现菜单的折叠和展开。同时,我们在 CSS 中将菜单的子元素 ul 隐藏起来,这样就可以初始时将菜单折叠起来。