0

我有一个页面，其中包含（Twitter）引导程序。在这个页面上，我有一个完美工作的手风琴，在那个手风琴内我有一个可折叠的 div。请看下面的代码：

<div class="accordion" id="checkListAccordion">
<div ng-repeat="item in items" class="accordion-group">
    <div class="accordion-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#checkListAccordion" href="#collapse{{item.$$hashKey}}">{{item.name}}</a>     
    </div>
    <div id="collapse{{item.$$hashKey}}" class="accordion-body collapse">
        <div class="accordion-inner">
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="badges span12">
                        <span class="badge badge-info" data-toggle="collapse" data-target=".info{{item.$$hashKey}}"><i class="icon-info-sign icon-white"></i></span>
                        <div class="info{{item.$$hashKey}} collapse in">
                            {{item.info}}
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12">
                       some text
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

现在，当我单击信息徽章时，具有相应类的 div 将折叠打开。但是当我再次单击它时它永远不会折回。只有当我包裹在导航栏和导航栏内部时，它才会折回......但当然，我不希望那样。

对此有什么帮助吗？

4

1 回答 1

1

当我将控制器添加到您的代码中时，一切似乎都按预期工作：

angular.module('plunker',[]);
function AccordionDemoCtrl($scope) {
  $scope.oneAtATime = true;

  $scope.items = [
    {
      name: "Dynamic Group Header - 1",
      info: "Dynamic Group Body - 1"
    },
    {
      name: "Dynamic Group Header - 2",
      info: "Dynamic Group Body - 2"
    }
  ];


}

另请参阅：http ://plnkr.co/nX4kvMThA0bYwcbXZS7t您使用的版本可能会出现问题？我使用了 jQuery 1.9.1、Twitter Bootstrap 2.3.1 和 angularJS 1.0.7（请参阅：Angular JS Bootstrap Accordian 示例）。

顺便说一句，您是否考虑使用 UI Bootstrap ( http://angular-ui.github.io/bootstrap/ ) 请参阅：http : //plnkr.co/u7l6nrkPZM8ZJtA08RNP（感谢回答如何在 Angular UI Bootstrap 中设置模板变量的 winkerVSbecks？ （手风琴）

于 2013-06-01T22:40:19.823 回答