应用错误收集

twitter bootstrap手风琴效果不适用于菜单

时间：2015-04-21 11:00:32

标签： angularjs

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

我在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>

2 个答案:

答案 0 :(得分：1)

最终它的工作正常，变化很小，

<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>

答案 1 :(得分：0)

回来，（经过艰难的一天......）和承诺：

比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移动到文件中。