基於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