關於Bootstrap 摺疊（Collapse）插件的基礎使用見：http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html
要求：
1、二級菜單中任意一個選中，則一級菜單選中；未選中二級菜單，僅一級菜單的點擊不算選中；
2、頁面通過跳轉進入相應的路徑，則對應的一級、二級菜單也要實現選中狀態；
實現方案：
1.監聽$locationChangeSuccess 事件（由 $rootScope 實例發出），在任何 location（瀏覽器中就是URL）變化的時候去監控相應的路徑，當這個路徑匹配了對應模塊的路徑，則保證其選中狀態；注意點：當多個頁面都可以跳轉進入同一個頁面，在該頁面返回時要保證上一級菜單的選中狀態，我是通過路徑傳值且頁面刷新也無影響。
2.通過channelIndex保證一級菜單的選中，通過channelPath保證二級菜單的選中，都是通過ng-class實現相應的樣式要求。
3.陰影效果在一級菜單和二級菜單的最後一個添加，因權限問題，一級和二級菜單都會有隱藏的情況。
html：
<div class="main-container">
<div class="col-xs-2 menu-left">
<div class="panel-group panel-group-defined" id="accordion0" role="tablist0">
<div class="panel-menu no-padding">
<div class="panel-menu-heading" role="button" href="#collapse" aria-expanded="true">
<div class="panel-menu-title">
<span>
<img class="glyphicon-list-alt panel-menu-icon common-icon" src="resource/images/homeIcon.png"/>
<span id="versionHome" class="panel-menu-text" ng-class="{'text-blue': channelIndex == 'versionHome'}" id="collapse" ui-sref=".versionHome">首頁</span>
</span>
</div>
</div>
</div>
</div>
<!--XX分析-->
<div class="panel-group panel-group-defined" id="accordion" role="tablist2" aria-multiselectable="true" ng-show="showModuleStat">
<div class="panel-menu" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<div class="panel-menu-title">
<span>
<img class="glyphicon-list-alt panel-menu-icon" src="resource/images/channel-menu-icon.png"/>
<span class="panel-menu-text" ng-class="{'text-blue': channelIndex=='#accordion'}">XX分析</span>
<span class="panel-menu-caret">⌵</span>
</span>
</div>
</div>
<div id="collapseOne" class="panel-collapse collapse" ng-class="{'in': channelIndex=='#accordion'}" role="tablist" aria-labelledby="headingOne">
<div class="panel-indexMenu-body index-topShadow">
<p ui-sref-active="panel-indexMenu-active" ui-sref=".attentionStatistics" ng-show="userCount">XX量統計</p>
<p ui-sref-active="panel-indexMenu-active" ui-sref=".bindingStatistics" ng-show="boundCount">XX量統計</p>
<p ui-sref-active="panel-indexMenu-active" ui-sref=".powerRepairStatistics" ng-show="powerRepairCount">XX統計</p>
<p ui-sref-active="panel-indexMenu-active" ui-sref=".customerAppealStatistics" ng-show="customerAppealCount">XX統計</p>
<p ui-sref=".elecBusinessStatistics" ng-class="{'panel-indexMenu-active':channelPath=='elecBusinessStatistics' || channelPath=='elecBusinessDetail'}" ng-show="bizCount">XX業務統計</p>
</div>
</div>
</div>
<!--ZZ管理-->
<div class="panel-group panel-group-defined" id="accordion7" role="tablist2" aria-multiselectable="true" ng-show="showModuleReq">
<div class="panel-menu" role="button" data-toggle="collapse" data-parent="#accordion7" href="#collapseOne7" aria-expanded="false" aria-controls="collapseOne2">
<div class="panel-menu-title">
<span>
<img class="glyphicon-list-alt panel-menu-icon" src="resource/images/demandIcon.png"/>
<span class="panel-menu-text" ng-class="{'text-blue': channelIndex=='#accordion7'}">ZZ管理</span>
<span class="panel-menu-caret">⌵</span>
</span>
</div>
</div>
<div id="collapseOne7" class="panel-collapse collapse" ng-class="{'in': channelIndex=='#accordion7'}" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-indexMenu-body index-topShadow">
<p ui-sref-active="panel-indexMenu-active" ui-sref=".newDemand" ng-show="newCreate">新建ZZ</p>
<p ui-sref=".pendDemand" ng-class="{'panel-indexMenu-active':channelPath=='pendDemand' || channelPath=='batchProcess' || (channelPath=='examineDemand' && isWho=='3')}">待處理ZZ</p>
<p ui-sref=".demandList" ng-class="{'panel-indexMenu-active':channelPath=='demandList' || (channelPath=='examineDemand' && isWho=='2')}">ZZ列表</p>
</div>
</div>
</div>
</div>
<div class="col-xs-10" ui-view></div>
</div>
router.js
app.run(function($rootScope,$uibModal) {
$rootScope.$on('$locationChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
//獲取 href 屬性中在井號“#”後面的分段
var path = window.location.hash;
path = path.substring(path.lastIndexOf("\/")+1,path.length);
if(path.match(RegExp('^[0-9]*$'))){
$rootScope.isWho = path;
path = window.location.href;
path = path.substring(path.lastIndexOf("\/", path.lastIndexOf("\/") - 1) + 1,path.length-2);
}
$rootScope.channelPath = path;
//統計分析
var statistics = ["attentionStatistics","bindingStatistics","elecBusinessStatistics","elecBusinessDetail","powerRepairStatistics","customerAppealStatistics"];
//需求管理
var demand = ["newDemand","pendDemand","demandList","examineDemand"];
if(checkNotNull(path)){
if(path.match(RegExp("versionHome"))){
//首頁
$rootScope.channelIndex = "versionHome";
}else if(statistics.indexOf(path)>-1){
//統計分析
commonSet('#accordion');
}else if(demand.indexOf(path)>-1){
//需求管理
commonSet('#accordion7');
}
}
//共用的判斷條件
function commonSet(firstMenu) {
$rootScope.channelIndex = firstMenu;
}
})
})
css
/*內容*/
.main-container{
width: 100%;
height: 100%;
margin: auto auto;
min-width: 1280px;
}
.menu-left{
padding: 0;
/*background: #fff;*/
height: 100%;
margin-top: 20px;
min-height: 1080px;
background-color: rgba(246, 246, 246, 1);
-moz-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.109803921568627);
-webkit-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.109803921568627);
box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.109803921568627);
}
.panel-menu{
width: 100%;
padding: 0 15px;
}
.panel-menu-heading{
padding: 0 15px;
}
.panel-group-defined{
margin-bottom: 0;
background: #fff;
}
.panel-menu-title{
padding: 13px 0;
}
.panel-menu-icon{
margin-top: -5px;
margin-right: 5px;
float: left;
width: 25px;
height: 25px;
vertical-align: middle;
}
.panel-menu-text{
font-size: 15px;
color: #515151;
display: inline-block;
}
.panel-menu-caret{
float: right;
color: #B1C5D4;
font-size: 17px;
font-weight: 700;
display: inline-block;
}
.index-topShadow{
-moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.0980392156862745) inset;
-webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.0980392156862745) inset;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.0980392156862745) inset;
}
.panel-indexMenu-body{
background: #F6F6F6;
}
.panel-indexMenu-body p{
padding: 0 44px;
margin: 0px;
color: #5E5E5E;
line-height: 40px;
cursor: pointer;
}
.panel-indexMenu-body p:last-child{
-moz-box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.0980392156862745) inset;
-webkit-box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.0980392156862745) inset;
box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.0980392156862745) inset;
}
.panel-indexMenu-active{
background: #77ACDD;
color: #fff !important;
}
.panel-menu-body p{
line-height: 40px;
padding: 0 44px;
margin: 0px;
cursor: pointer;
border-bottom: 1px solid #e7e7e7;
}
.panel-menu-active{
background: #E6F7FF;
color: #276399;
}
效果圖
注：此爲個人筆記及總結，有誤或有更好的解決方案請指正！謝謝