jqury折叠菜单栏
时间: 2023-09-12 09:07:30 浏览: 48
以下是一个简单的 jQuery 折叠菜单栏的示例:
HTML 代码:
```html
<div class="menu">
<div class="menu-item">主菜单1</div>
<div class="sub-menu">
<div class="sub-menu-item">子菜单1</div>
<div class="sub-menu-item">子菜单2</div>
<div class="sub-menu-item">子菜单3</div>
</div>
<div class="menu-item">主菜单2</div>
<div class="sub-menu">
<div class="sub-menu-item">子菜单4</div>
<div class="sub-menu-item">子菜单5</div>
<div class="sub-menu-item">子菜单6</div>
</div>
</div>
```
CSS 代码:
```css
.menu {
background-color: #eee;
padding: 10px;
}
.menu-item {
font-weight: bold;
cursor: pointer;
}
.sub-menu {
display: none;
}
.sub-menu-item {
margin-left: 20px;
cursor: pointer;
}
```
jQuery 代码:
```javascript
$(document).ready(function() {
$('.menu-item').click(function() {
$(this).next('.sub-menu').slideToggle('fast');
});
});
```
在上面的代码中,我们使用了 jQuery 的 click() 方法来监听菜单项的点击事件。当用户点击菜单项时,我们使用 slideToggle() 方法来切换相邻的子菜单的显示和隐藏。这里的 slideToggle() 方法会自动计算子菜单的高度,并创建一个动画来显示或隐藏它。
你可以将上述代码复制到一个 HTML 文件中并在浏览器中打开,以查看折叠菜单栏的效果。