jquery折叠菜单
使用 jQuery 实现折叠菜单
通过 jQuery 可以轻松实现折叠菜单效果，以下是两种常见方法：
方法一：使用 slideToggle() 实现基础折叠
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.menu-item {
cursor: pointer;
padding: 10px;
background: #f0f0f0;
margin-bottom: 5px;
}
.submenu {
display: none;
padding: 10px;
background: #e0e0e0;
}
</style>
</head>
<body>
<div class="menu-item">主菜单</div>
<div class="submenu">
<div>子项1</div>
<div>子项2</div>
<div>子项3</div>
</div>
<script>
$(document).ready(function(){
$(".menu-item").click(function(){
$(this).next(".submenu").slideToggle();
});
});
</script>
</body>
</html>方法二：添加动画效果和状态指示
<script>
$(document).ready(function(){
$(".menu-item").click(function(){
$(this).next(".submenu").slideToggle(300);
$(this).toggleClass("active");
});
});
</script>
<style>
.menu-item.active {
background: #d0d0d0;
}
.menu-item::after {
content: "+";
float: right;
}
.menu-item.active::after {
content: "-";
}
</style>实现多级折叠菜单
对于多级菜单结构，可以使用递归方式处理：
<div class="menu">
<div class="menu-item">一级菜单
<div class="submenu">
<div class="menu-item">二级菜单
<div class="submenu">
<div>三级项1</div>
<div>三级项2</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$(".menu").on("click", ".menu-item", function(e){
e.stopPropagation();
$(this).children(".submenu").slideToggle();
$(this).toggleClass("active");
});
});
</script>使用 jQuery UI 实现手风琴效果
如果需要更专业的折叠效果，可以引入 jQuery UI：
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="accordion">
<h3>菜单1</h3>
<div>
<p>内容1</p>
</div>
<h3>菜单2</h3>
<div>
<p>内容2</p>
</div>
</div>
<script>
$(function(){
$("#accordion").accordion({
collapsible: true,
heightStyle: "content"
});
});
</script>注意事项
- 确保 DOM 完全加载后再绑定事件，使用
$(document).ready() - 多级菜单注意使用
e.stopPropagation()防止事件冒泡 - 考虑添加 CSS 过渡效果提升用户体验
- 移动端设备可能需要添加触摸事件支持
以上方法可以根据实际需求进行组合和扩展，实现各种复杂的折叠菜单效果。
