基于bootstrap的后台左侧导航菜单和点击二级菜单刷新二级页面时候菜单展开显示当前菜单...

本文使用的框架版本为：

bootstrap3，Jquery2.1.0  (其他jquery可能会报错，菜单项不执行

效果如下：

1.在项目中引入框架：

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

2.自定义样式

<style>
.side-nav-item {
display: block;
padding: 10px 15px 10px 15px;
background-color: #FFFFFF;
cursor: pointer;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.item-title {
background-color: #F5F5F5;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom: 1px solid #DDDDDD;
}

.panel-heading {
margin-top: 5px;
padding: 0;
border-radius: 3px;
border: 1px solid transparent;
border-color: #DDDDDD;
}

.item-body {
padding: 10px 15px 5px 15px;
border-bottom: 1px solid #DDDDDD;
}

.item-second {
margin-top: 5px;
cursor: pointer;
}

.item-second a {
display: block;
height: 100%;
width: 100%;
}
.at{ color:red;}
</style>

3.jquery控制页面点击后展开合并

<script>

$(document).ready(function(){
var path=window.location.pathname;  //先得到地址栏内容
var regExp=/[\/\.\?]+/;
str=path.split(regExp);
var node=str.slice(-2,-1);   //截取地址栏信息得到文件名
$('#'+node+' a').addClass('at');  //提前写好对应的id,菜单加亮
$('#'+node).parent().parent().parent().addClass('in'); //id父级的父级的父级添加展开class 
})
</script>

4.html 

index.html

<div class="col-md-2 side-nav">
<div class="panel-group" id="accordion">
<div class="panel-heading panel">
<a href="index.html" class="side-nav-item item-title">
首页
</a>
<div class="item-body collapse" id='index'>
</div>
</div>

<div class="panel-heading panel">
<a data-toggle="collapse" data-parent="#accordion" href="#item-cangku" id="headcangku" class="side-nav-item item-title">
仓库管理
</a>
<div id="item-cangku" class="panel-collapse collapse">
<div class="item-body">
<ul class="list-unstyled">
<li class="item-second" id='a'><a href="a.html">产品库存</a></li>
<li class="item-second" id='b'><a href="b.html">原料库存</a></li>
</ul>
</div>
</div>
</div>

<div class="panel-heading panel">
<a data-toggle="collapse" data-parent="#accordion" href="#item-caiwu" id="headcaiwu" class="side-nav-item item-title collapsed">
财务管理
</a>
<div id="item-caiwu" class="panel-collapse collapse">
<div class="item-body">
222
</div>
</div>
</div>

<div class="panel-heading panel">
<a data-toggle="collapse" data-parent="#accordion" href="#item-renshi" id="headrenshi" class="side-nav-item item-title collapsed">
人事管理
</a>
<div id="item-renshi" class="panel-collapse collapse">
<div class="item-body">

</div>
</div>
</div>
</div>
</div>

这样菜单已经可以运行了，然后还需要点击产品库存的时候仓库管理展开

a页面菜单部分和inde上面一样

 

 

具体代码如下：

https://pan.baidu.com/s/1i5wvfOp  

提取密码  bjk2

 

转载于:https://www.cnblogs.com/chaihy/p/6999614.html