点击左侧菜单展开二级菜单样式简单实现_bootstrap做后台左侧菜单滑动展开,包含二级菜单点击展开三级菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/cc_Judas/article/details/83346374

这篇博客介绍了如何利用jQuery和bootstrap轻松实现后台管理界面中点击左侧菜单展开二级菜单的样式效果，适合初学者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
	<!-- bootstrap -->
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
	<div class="container">
    <div class="row">
		<div class="col-sm-3">
		<ul class="list-group">
			<li class="list-group-item" id="a" name="menu1"><span class="glyphicon glyphicon-user"/>&nbsp;系统管理
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-chevron-down" id="icona"/></li>
				
				<li class="list-group-item" name="menu2a">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span class="glyphicon glyphicon-chevron-right"/>&nbsp;集团管理</li>
				<li class="list-group-item" name="menu2a">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span class="glyphicon glyphicon-chevron-right"/>&nbsp;企业管理</li>
				<li class="list-group-item" name="menu2a">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span class="glyphicon glyphicon-chevron-right"/>&nbsp;员工管理</li>
			
			<li class="list-group-item" id="b" name="menu1"><span class="glyphicon glyphicon-user"/>&nbsp;用户管理
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-chevron-down" id="iconb"/></li>
			<li class="list-group-item" id="c" name="menu1"><span class="glyphicon glyphicon-user"/>&nbsp;文件管理
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-chevron-down" id="iconc"/></li>
			<li class="list-group-item" id="d" name="menu1"><span class="glyphicon glyphicon-user"/>&nbsp;基础配置
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-chevron-down" id="icond"/></li>
		</ul>
		</div>
	</div>
	</div>
	
	<script type="text/javascript">
		function click1(obj){
			$('li[name=menu2'+obj.id+']').toggle();
			if($('#icon'+obj.id).attr("class")=="glyphicon glyphicon-chevron-down"){
				$('#icon'+obj.id).attr("class","glyphicon glyphicon-chevron-up")
			}else{
				$('#icon'+obj.id).attr("class","glyphicon glyphicon-chevron-down")
			}
		}
		
		$(function(){
			$('li').mouseover(function(){this.style="background-color:#ffe;cursor:pointer;"});
			$('li').mouseout(function(){this.style="background-color:white;cursor:pointer;"});
			$('li[name=menu1]').click(function(){click1(this)});
		})
	</script>
</body>

</html>

一个做后台开发的随手写的，可能不那么整洁。。。jQuery+bootstrap