Bootstrap 折叠（Collapse）插件使用且保证一级、二级菜单的选中状态

关于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;
}

效果图

注：此为个人笔记及总结，有误或有更好的解决方案请指正！谢谢