为什么我的手风琴没有倒塌？ - 相同的确实有效

Question

http://plnkr.co/edit/xUuZyQTES83yccFRcc4K?p=preview

查看我的 plunker，它复制了我的确切问题。我尽可能地精简了我的代码。

我也尽可能地浏览了我的代码.. 不幸的是，我无法找到第一组手风琴和第二组手风琴之间有什么显着不同，导致第一组手风琴不能工作。

第一组（不工作）：

        <div ng-repeat="x in numOfMaps" class="{{x.count}}Details">
          <li class="m2Details m3Details"><a data-toggle="collapse" dataTarget="#{{x.count}}toggleBuilding" href="#">Building<span class="caret"></span></a></li>
          <ul id="{{x.count}}toggleBuilding" class="accordion-body {{x.buildingOpen}}">
              <li ng-repeat="y in this[x.count + 'InfoBuilding']" class="{{y.linkclass}}"><a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)"><img src="{{y.icon}}" width="15px" height="15px">{{y.name}}</a></li>
          </ul>
        </div>
        <div ng-repeat="x in numOfMaps" class="{{x.count}}Details">
          <li class="m2Details m3Details m4Details"><a data-toggle="collapse" dataTarget="#{{x.count}}toggleOffsite" href="#">Offsite<span class="caret"></span></a></li>
          <ul id="{{x.count}}toggleOffsite" class="accordion-body {{x.offsiteOpen}}">
              <li ng-repeat="y in this[x.count + 'InfoOffsite']" class="{{y.linkclass}}"><a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)"><img src="{{y.icon}}" width="15px" height="15px">{{y.name}}</a></li>
          </ul>
        </div>

此代码包含在另一个 ul 标签和其他内容中..但我怀疑其中任何一个都有影响，因为它在其他方面都运行良好，但这是一个骨架副本：

<div>
 <ul>
  <li><img></li>
  <li ng-repeat=""><a>{{text}}</a></li>
  <li><a><span>Text</a></li>
     ///first set of code (above)
 </ul>
</div>

第二组（工作）：

<ul ng-repeat="x in numOfMaps" class="buildingDropdown {{x.count}}Details {{locationsVisibility}}">
        <a class="btn btn-primary btn-block" id="toggleHeader" data-toggle="collapse" data-target="#{{x.count}}LocationsList" href="#"><span>Locations</span><span class="caret"></span></a>
        <ul id="{{x.count}}LocationsList" class="accordion-body collapse buildingListDropdown">
          <a ng-repeat="y in this[x.count + 'InfoBuilding']" href="{{y.link}}" class="{{y.linkclass}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)"><li>{{y.name}}</li></a>
          <a ng-repeat="y in this[x.count + 'InfoOffsite']" href="{{y.link}}" class="{{y.linkclass}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)"><li>{{y.name}}</li></a>
        </ul>
    </ul>

有人想看一下吗？这可能是一些小而令人尴尬的事情，例如 "DOH!" 时刻。非常感激。 :)

Answer 1

你说得对 - 它很小！

您不小心将某些 data-target 属性采用了驼峰式大小写：

<li class="m2Details m3Details">
  <a data-toggle="collapse" dataTarget="#{{x.count}}toggleBuilding" href="#">
    Building
    <span class="caret"></span>
  </a>
</li>

注意 dataTarget 应该是 data-target。

为什么我的手风琴没有倒塌？ - 相同的确实有效

Howcome my accordion is not collapsing? - identical one does work

accordion

angularjs