Bootstrap崩溃不会崩溃

时间:2013-05-30 20:32:47

标签: twitter-bootstrap angularjs toggle collapse

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

对此有何帮助?

1 个答案:

答案 0 :(得分: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)