关于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;
}
效果图
注：此为个人笔记及总结，有误或有更好的解决方案请指正！谢谢