Bootstrap 崩溃不倒塌答案

【问题标题】：Bootstrap collapse not collapsing backBootstrap 崩溃不倒塌
【发布时间】：2013-05-26 13:46:59
【问题描述】：

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

有什么帮助吗？

【问题讨论】：

当我尝试使用硬编码类名的代码时，它似乎可以工作：请参阅bootply.com/62667。你确定你的{{item.$$hashKey}} 设置正确吗？
奇怪...事实证明，当我移除周围的中继器（手风琴项目是在 ng-repeat 中创建的）时，一切正常。即使我对多个项目进行硬编码。我更新了 html 以说明更多内容。
ng-repeat 具有不同的范围，另请参阅：stackoverflow.com/questions/16854463/… 您应该使用 ng-click 事件来添加/删除 .in 类。
@BassJobsen 感谢您的帮助。不幸的是，我没有看到问题（我对 Angular 有点陌生）。能给我解释一下吗？
我会试试的。 Twitter bootstrap 使用 jQuery 进行 DOM 操作（添加或删除 .in 类）。 Angular 创建新的 DOM 元素（你的手风琴项）。 jQuery 不知道这些元素，因为它们是在其他范围（Angular）中创建的。此视频youtube.com/watch?v=bk-CC61zMZk 可能对您有所帮助。

标签： twitter-bootstrap angularjs toggle collapse

【解决方案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）。

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

【讨论】：

感谢您的帮助。事实证明，我自己的一些 CSS 欺骗了我。可折叠 div 在打开时位于切换按钮的顶部。因此，我无法再单击按钮将 div 滑回。这很有意义，不是吗。我的错。
现在很好用。我学到了很多关于 angularJS 和 UI Bootstrap 的知识，这也很好:)