Question

我有一个页面，其中包含（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将折叠打开。但是当我再次点击它时它永远不会折叠。只有当我在导航栏和导航栏内部进行包装时，它才会折回......但当然，我不希望这样。

对此有何帮助？

Answer 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 Example）。

btw您是否考虑使用UI Bootstrap（http://angular-ui.github.io/bootstrap/），请参阅：http://plnkr.co/u7l6nrkPZM8ZJtA08RNP（感谢winkerVSbecks谁回答了Howto set template variables in Angular UI Bootstrap? (accordion)）

Bootstrap崩溃不会崩溃

1 个答案: