推特引导手风琴效果不适用于菜单

我有带有子菜单的父菜单，但手风琴效果不适用于菜单。如果单击第二个菜单链接，则第一个菜单应自动关闭）

我已经在 plunker 中创建了代码，

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

视图

<div id="sidebar-wrapper"> 
    <ul class="panel sidebar-nav" ng-repeat="item in model | orderBy:'sortOrder'">
    <li>
    <a class="dropdown-toggle mainMenu menuArrow" href="javascript:void(0)" >{{item.description}}
     <i class="sub_icon fa fa-lg fa-fw {item.iconTarget}}"></i>
   </a>
   <ul class="submenu" style="display: none;">
     <li ng-repeat="subitem in item.children">
        <a href="#{{subitem.target}}" class="subTitle"> {{subitem.description}} </a>
      </li>
   </ul>
  </li>
 </ul>
</div>

最后它工作正常，只需少量更改，

<div id="sidebar-wrapper">
    <div id="accordion">
      <ul class="panel sidebar-nav" ng-repeat="item in model | orderBy:'sortOrder'" id="sidebar{{$index}}">
        <li>
          <a href="javascript:void(0)" class="mainMenu menuArrow collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#child{{$index}}" ng-click="model.selected = item">{{item.description}}
             <i class="sub_icon fa fa-lg fa-fw {{item.iconTarget}}"></i>
          </a>
        </li>
        <li id="child{{$index}}" data-menu-title="{{item.description}}" ng-class="{'collapse':true}">
          <ul>
            <li ng-repeat="subitem in item.children">
             <a href="#{{subitem.target}}" class="subTitle"> {{subitem.description}} </a>
            </li>
          </ul>
        </li>
     </ul>
    </div>
</div>

回来，（经过辛苦的一天...）并作为承诺：

比ng-Class更好（就像我之前说的），我建议使用Angular UI（用AngularJS本地编写的Twitter Bootstrap）

<!doctype html>
<html ng-app="ui.bootstrap.demo">
 <head>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
 <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<script>
//here in your javascript file (here is a demo)    
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);     
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {

$scope.oneAtATime = true;
    $scope.model = [
      {
          "code": "401",
          "description": "Transactions",
          "labelName": null,
          "target": null,
          "children": [
              {
                  "description": "Deposit Funds",
                  "target": "transds",
                  "children": null
              },
              {
                  "description": "Withdraw Funds",
                  "target": "fdfdfs",
                  "children": null
                }
            ]
         },
        {
          "code": "403",
             "description": "Cash Management",
             "labelName": null,
             "target": null,
             "children": [
               {
                     "description": "Head Cashier - Entry",
                     "target": "ccry.html",
                     "children": null
              },
              {
                  "description": "Head Cashier - Verify",
                  "target": "ccg.html",
                  "children": null
              }
          ]
      }
   ];
});      
 </script>

</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<label class="checkbox">
<input type="checkbox" ng-model="oneAtATime">
  Open only one at a time
</label>
<p>Example amazing angular accordion</p>

 <accordion close-others="oneAtATime" >
   <div ng-repeat="item in model | orderBy:'sortOrder'">
   <accordion-group>
     <accordion-heading>
       {{item.description}} <i class="sub_icon fa fa-lg fa-fw {{item.iconTarget}}"></i>
     </accordion-heading>
     <div ng-repeat="subitem in item.children">
         <a href="#{{subitem.target}}" class="subTitle"> {{subitem.description}} </a>
     </div>
   </accordion-group>
   </div>
 </accordion>

 </div>
 </body>
</html>

接下来，我让你应用自己的css并在文件中移动js。

视图

回来，（经过辛苦的一天...）并作为承诺：

相关内容

最新更新

热门标签：