折叠菜单效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/iconfont.css" rel="stylesheet"/>
<style>
ul,li,a{
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
color: #000;
line-height: 28px;
}
#menu>li{
width: 130px;
list-style-type: none;
text-align: center;
background-color: #000;
}
#menu>li>a{
color: #fff;
}
.submenu{
background-color: #fff;
display: none;
}
.submenu>li{
list-style-type: none;
}
</style>
</head>
<body>
<div>
<ul id="menu">
<li>
<a href="#"><span class="iconfont icon-yonghu"></span> 用户管理 <span class="iconfont icon-shangjiantou"></span></a>
<ul class="submenu" style="display: block;">
<li><span class="iconfont icon-tianjia"></span> <a href="#">添加用户</a></li>
<li><span class="iconfont icon-chakanxinxi"></span> <a href="#">查询用户</a></li>
</ul>
</li>
<li>
<a href="#"><span class="iconfont icon-jurassic_add-users"></span> 角色管理 <span class="iconfont icon-xiajiantou"></span></a>
<ul class="submenu">
<li><span class="iconfont icon-tianjia"></span> <a href="#">添加角色</a></li>
<li><span class="iconfont icon-chakanxinxi"></span> <a href="#">查询角色</a></li>
</ul>
</li>
<li>
<a href="#"><span class="iconfont icon-quanxian"></span> 权限管理 <span class="iconfont icon-xiajiantou"></span></a>
<ul class="submenu">
<li><span class="iconfont icon-tianjia"></span> <a href="#">添加权限</a></li>
<li><span class="iconfont icon-chakanxinxi"></span> <a href="#">查询权限</a></li>
</ul>
</li>
</ul>
</div>
<script src="js/jquery-3.6.4.js"></script>
<script>
$(function(){
$("#menu>li>a").click(function(){
$(this).next().slideToggle(500);
$(this).children().last().toggleClass("icon-xiajiantou").toggleClass("icon-shangjiantou")
})
})
</script>
</body>
</html>
说明：案例中使用了iconfont图标
欢迎大家阅读，本人见识有限，写的博客难免有错误或者疏忽的地方，还望各位指点，在此表示感激不尽。文章持续更新中…
