Question

我想建立一个如下所示的菜单，但我找不到使用AngularJS 1.4，bootstrap＆amp; amp;手风琴。手风琴是必须的。请指教。

menu1
menu2
  submenu2.1
  submenu2.2
     sub-submenu2.2.1
     sub-submenu2.2.2
menu3

我已添加以下代码。样式表是Bootstrap.css。还有一些在项目中使用的自定义样式表。手风琴菜单元素在每个菜单级别应具有不同的颜色。所选的一个也应该以不同的颜色显示。当我们将鼠标悬停在元素上时，它应显示不同的颜色。根据以下实现，我在菜单中有2个主要级别元素。第一个元素是显示正确的手风琴行为。第二个元素总是开放的。没有样式表应用于任一菜单元素。请指教。

HTML：

 <script type="text/ng-template" id="menuTree">
      <uib-accordion-group is-open="firstMenuItemStatus.isFirstOpen" is-disabled="firstMenuItemStatus.isFirstDisabled">
        <uib-accordion-heading ng-if="c.pDtos">
            {{c.name}}
        </uib-accordion-heading>
        <div ng-repeat="p in c.pDtos" ng-include="'smenuTree'"></div>
      </uib-accordion-group>
  </script>

  <script type="text/ng-template" id="smenuTree">
      <uib-accordion-group>
        <uib-accordion-heading>
          {{p.name}}
        </uib-accordion-heading>
        <div ng-show="p.aDtos" ng-repeat="a in p.aDtos">
          <a ui-sref="crhDetail({ crhId : a.crhId})">{{a.name}}</a>
        </div>
      </uib-accordion-group>
  </script>
  <div class="menuSec" ng-controller="menuCtrl">
    <uib-accordion close-others="true">
      <div ng-repeat="c in menuTreeSet" ng-include="'menuTree'" >
      </div>
    </uib-accordion>    
  </div>

自定义CSS：

.menuSec {top: 80px;left: 0;right: 0;bottom: 0;}
.menuSec>ul {position: absolute;background:#2166b3;width:100%;}
.menuSec>ul>li, .secondLevelList>li, .thirdLevelList>li{position: relative;float: right;display:block;list-style: none;width: 100%;height: 40px;line-height: 44px;text-align: right;font-size: 12px;padding-right: 14px;box-shadow: 0 1px 0 #3A76C4;cursor: pointer;}
.secondLevelList, .thirdLevelList{width:220px;}
.secondLevelList>li, .thirdLevelList>li{width:220px;height:30px;line-height: 32px;float: right;list-style: none;}
.selected{height:auto !important;background:#135aa9;border-left: 3px solid #000033;border-bottom:none;box-shadow:none !important;}
.secondLevelList>.selected{background:#004388;}
.menuText{position:absolute;text-align:right;right:47px;}
.menuSec ul li:hover {background: #135aa9;border-left: 3px solid #000033;}
.menuSec ul li .fa {margin-left: 14px;line-height: 40px;}
.secondLevelList, .thirdLevelList{position:relative !important;float:right;display:block;border-top:1px solid #000033;}
.secondLevelList{margin-right:-14px;}
.thirdLevelList{margin-right:-24px;}
.secondLevelList>li{background:#0a4d99;border-bottom:1px solid #2a66a9;padding-right:24px;}
.selected>.secondLevelList>li:hover{background:#004388 !important;}
.secondLevelList>li:hover{background:#003b78;}
.thirdLevelList>li{background:#004388;border-bottom:1px solid #18589f;padding-right:34px;}
.thirdLevelList>li:hover{background:#003871 !important;}
.thirdLevelList>.selected, .thirdLevelList>.selected:hover{padding-right:10px;background-image:url(../images/NowWeAt.png) !important;background-position:right !important;background-repeat:no-repeat !important;}
.menuSecCT{width:80px;overflow:hidden;}
.menuSecCT .menuText{display:none;}
.menuSec ul li{padding-right:34px;}
.secondLevelList, .thirdLevelList{display:none;}}

Answer 1

以下是多级（3级）UI Bootstrap手风琴的示例。你必须适应你的需要。

此示例基于ng-include：

<script type="text/ng-template" id="menuTree">
      <uib-accordion-group>
        <uib-accordion-heading ng-if="menu.listChilds">
          <a href="{{menu.href}}">{{menu.label}}</a>
        </uib-accordion-heading>
        <div ng-repeat="submenu in menu.listChilds" ng-include="'smenuTree'"></div>
      </uib-accordion-group>
  </script>

  <script type="text/ng-template" id="smenuTree">
      <uib-accordion-group>
        <uib-accordion-heading >
          <a href="{{submenu.href}}">{{submenu.label}}</a>
        </uib-accordion-heading>
        <div ng-show="submenu.listChilds" ng-repeat="item in submenu.listChilds">
          <a href="{{item.href}}">{{item.label}}</a>
        </div>
      </uib-accordion-group>
  </script>

  <div ng-controller="MenuController">
    <uib-accordion close-others="oneAtATime">
      <div ng-repeat="menu in items" ng-include="'menuTree'"></div>
    </uib-accordion>
  </div>

http://plnkr.co/edit/ERURCsdvjhts1ujkYTrz?p=preview

AngularJS 1.4，bootstrap多级Accordion示例

1 个答案: