网络建站知识

精准传达 • 价值共享

洞悉互联网前沿资讯,探寻网站营销规律

HTML点击左侧菜单展开二级菜单样式简单实现

作者:狐灵科技 | 2019-12-12 18:35 |点击:

<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>
 
如没特殊注明,文章均为狐灵科技原创,转载请注明  https://www.hulingweb.cn/jzzs/716.html
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

网站设计 品牌营销

多一份参考,总有益处

联系狐灵科技,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:023-68168040 / 大客户专线:15523356218