accordion定义一个手风琴菜单区域，close-others属性可以指定本区域内的菜单组的展开是否互斥，值为true时，一次只能展开一个菜单组，为false，可以存在多个展开的菜单。（注：这里用菜单一词不太准确，先这么着。）
accordion-group定义手风琴上的可折叠内容，它的heading属性指定折叠区域的标题，is-open属性指定当前菜单是否打开，为true时打开，你在HTML中指定true或false时，是初始值，用户点击后，会改变。你也可以把这个属性和Angular作用域模型中的数据关联在一起。我引用了Angular的ng-repeat指令内置的first属性，由ng−repeat生成的第一个item的first属性值为true。所以我设计的手风琴区域，初始加载时第一个可折叠菜单时打开的。
bootstrap-admin.js
复制原来的admin.js为bootstrap-admin.js，内容修改为下面这样：
angular.module('x-admin', ['ui.bootstrap', 'ngAnimate']). controller('x-controller', function ($scope, $http) { $scope.currentUser="ZhangSan"; $scope.content = '/welcome.html'; $scope.oneAtATime = false; $scope.menus =[ { text: "系统管理", enabled: true, subMenus:[ { text: "用户管理", enabled: true, action:"/admin/addUser" }, { text: "角色管理", enabled: true, action:"/role" }, { text: "权限管理", enabled: true, action:"/access" } ] }, { text: "内容管理", enabled: true, subMenus:[ { text: "直播流监控", enabled: true, action:"/stream-monitor" }, { text: "预约管理", enabled: true, action:"/book-mgr" } ] }, { text: "推送管理", enabled: true, subMenus:[ { text: "推送列表", enabled: true, action:"/push-list" }, { text: "新增推送", enabled: true, action:"/add-push" } ] } ]; $scope.setContent = function(action){ console.log(action); $scope.content=action; }; });
我给$scope设置了oneAtATime属性，初值为false，HTML中accordion元素的close-others属性和oneAtATime绑定了。所以，最终我们的管理菜单是可以同时打开多个的。
最重要的改动是第一行代码：
angular.module('x-admin', ['ui.bootstrap', 'ngAnimate']).
注入了对ui.bootstrap和ngAnimate两个模块的依赖。
好了，最终在浏览器里打开“:3000/bootstrap-admin.html”，效果如下：
点击内容管理后，效果如下：
