网络建站知识

精准传达 • 价值共享

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

网站建设 > 网站建设 > 网络建站知识

查看其它板块

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

作者：狐灵科技 | 2019-12-09 14:01 |点击：

<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>
 
如没特殊注明，文章均为狐灵科技原创,转载请注明   "HTML点击左侧菜单展开二级菜单样式简单实现
相关推荐
返回首页 了解更多建站资讯

—— 微信公众号 ——

热门标签

上一篇———————

html 隐藏滚动条

下一篇———————

织梦模板调用TAG标签显示标签包含文档数量
多一份免费策划方案，总有益处。

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

立即询问 技术总监在线 15523356218
网站设计 品牌营销

多一份参考，总有益处

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

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

业务热线：15082661954 / 大客户专线：15523356218

在线咨询 在线咨询 提交需求

关于狐灵科技

+

狐灵致力于互联网品牌建设与网络营销，专业领域包括 网站建设、 SEO优化、移动互联网营销、高端网站建设、高端网站设计、品牌网站定制开发、营销策划推广电子商务、移动互联网营销、 为不同类型的客户提供良好的互联网应用定制解决方案，我们将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供一体化全方位的互联网品牌整合方案！

我们的优势

量身打造个性化网站制作

代码深度符合SEO优化

一站式企业网站建设服务

前沿视觉设计、研发能力

重庆网站建设公司

多项网站设计传播大奖

营销型网站建设专家

自主研发网站管理系统

B2C电商网站建设供应商

完善的售后服务体系

我们的不同

+

在我们的对手消耗大量的时间停留在碎片化的互联网设计或者程序实现的时候，我们已经开始把数字化品牌建设和网络传播进行了整合。我们提供从前期的网站品牌分析策划、网站设计、创意表现、系统开发以及后续网站运营反馈建议等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,为所有谋求长远发展的企业品牌贡献全力！

友情链接 交换友情链接 交换友情链接 展开

公司地址：重庆市九龙坡杨家坪重百大楼21-8 | 业务热线：15082661954

Copyright © 2017-2020 Fox spirit Network. 狐灵科技 版权所有 | 渝ICP备19005721号-1

专业团队为您提供 重庆网页设计, 品牌网站设计,营销型网站制作,SEO优化关键词排名推广等服务,建网站就找狐灵科技！ | TAG标签 | 网站建设地图 | 网站地图

业务咨询 业务咨询 业务热线 15082661954 提交需求 官方微信 狐灵网络科技官方微信