Question

我有两个手风琴使用名为“collapse”的相同功能，这是bootstrap的一部分。

我遇到的问题是点击两个手风琴同时打开 - 这不是我想要的。

我认为正在进行的是两种手风琴都使用相同的功能而没有像ID或元素那样的区别。

我不确定如何制作它，以便用户点击手风琴时，只会打开点击的手风琴。

这是我的代码：

<div class="col-xs-12">
                  <div class="connections-wrap" ng-class="{'accordion-active': active}" ng-click="isCollapsed = !isCollapsed; toggleClass()" ng-init="isCollapsed = true">
                    <span class="connection-amount">{{billingAccount.totalSharers}}</span>
                    <span class="connection-type">Shared connections</span>
                    <div class="account-summary-icon-set-3 task-left connection-chevron"></div>
                  </div>
                  <!-- {{connection}} -->

                  <ul class="connections-list connection-list-first collapse" collapse="isCollapsed">
                    <li ng-repeat="sharedConnection in billingAccount.connections['sharers']">
                      <span class="connection-device">{{sharedConnection.nameTwo}}</span>
                      <span class="connection-number">{{sharedConnection.billingAccountNumber}}</span>
                    </li>
                  </ul>

                  <div class="connections-wrap">
                    <span class="connection-amount">{{billingAccount.totalOthers}}</span>
                    <span class="connection-type">Other connections</span>
                    <div class="account-summary-icon-set-3 task-left connection-chevron"></div>
                  </div>


                  <ul class="connections-list collapse" collapse="isCollapsed">
                    <li ng-repeat="otherConnection in billingAccount.connections['others']">
                      <span class="connection-device">{{otherConnection.nameTwo}}</span>
                      <span class="connection-number">{{otherConnection.billingAccountNumber}}</span>
                    </li>
                  </ul>
                </div> 
              </div>

Answer 1

您在多个地方使用isCollapsed范围变量。使用不同的变量来独立控制手风琴

AngularJs“崩溃”| ng-repeat多个手风琴

1 个答案: