javascript - 两个动态生成的 Bootstrap Accordion 相互冲突

Question

在此处使用 Angular，该应用程序能够在一个浏览器选项卡中打开多个“ Pane ”。这些 Pane 的功能本质上就像它们自己的浏览器选项卡一样。我有一个 Bootstrap Accordion ，使用标准的 Bootstrap 设置:

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <a data-toggle="collapse" data-parent="#accordion" href="#accordionOne"></a>
        </div>
        <div id="accordionOne" class="panel-collapse collapse in">
            <div class="panel-body">
                 <div class="">CONTENT</div>
            </div>
        </div>
     </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo"></a>
        </div>
        <div id="accordionTwo" class="panel-collapse collapse in">
            <div class="panel-body">
                 <div class="">CONTENT 2</div>
            </div>
        </div>
     </div>
</div>

这里的问题是，由于有多个 Pane ，用户有可能在同一区域打开 2 个 Pane 并渲染此 Accordion 两次。这样做意味着单击第二个渲染的 Accordion 上的任何元素将仅控制第一个 Accordion 。

参见this fiddle例如

由于我不知道用户可以一次生成多少次这个“ Pane ”，是否有一个好的方法来解决此类问题？

注意:我知道为什么会发生这种情况，包括数据目标等等。这是一个关于如何动态解决这个问题的问题。

Tangentially related

Answer 1

它们应该具有唯一的 ID 属性。将第二个更改为 accordion2 或其他一些唯一标识符。所有面板也必须具有唯一的 ID。如果它们是动态生成的，则必须更改该逻辑以生成唯一的 id，而不是在每次迭代中再次使用相同的 id。

http://www.bootply.com/85EJ8o0bWu

<div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <a data-toggle="collapse" data-parent="#accordion" href="#accordionOne">Section One</a>
        </div>
        <div id="accordionOne" class="panel-collapse collapse in">
          <div class="panel-body">
            <div class="">CONTENT</div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo">Section 2</a>
        </div>
        <div id="accordionTwo" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="">CONTENT 2</div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <a data-toggle="collapse" data-parent="#accordion" href="#accordionThree">Section 3</a>
        </div>
        <div id="accordionThree" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="">CONTENT 3</div>
          </div>
        </div>
      </div>
    </div>

    <div class="panel-group" id="accordion2">
      <div class="panel panel-default">
        <div class="panel-heading">
          <a data-toggle="collapse" data-parent="#accordion2" href="#accordionOne2">Section One</a>
        </div>
        <div id="accordionOne2" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="">CONTENT</div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <a data-toggle="collapse" data-parent="#accordion2" href="#accordionTwo2">Section 2</a>
        </div>
        <div id="accordionTwo2" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="">CONTENT 2</div>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading">
          <a data-toggle="collapse" data-parent="#accordion2" href="#accordionThree2">Section 3</a>
        </div>
        <div id="accordionThree2" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="">CONTENT 3</div>
          </div>
        </div>
      </div>
    </div>

如果您特别希望了解Angular 中的迭代，这实际上取决于数据的结构方式，并且 ng-repeat 有许多不同的方法。

Repeating Bootstrap accordions with Angular .