两个动态生成的引导手风琴相互冲突

Two dynamically generated bootstrap accordions conflicting with each other

本文关键字：手风琴 冲突 两个 动态      更新时间：2023-09-26

在Angular中，应用程序可以在一个浏览器选项卡中打开多个"窗格"。这些窗格的功能就像它们自己的浏览器选项卡。我有一个引导手风琴，使用标准的引导设置:

<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>

这里的问题是，由于多个窗格，有可能用户打开两个窗格到同一区域，并呈现这个手风琴两次。这样做意味着单击第二个渲染手风琴上的任何元素将只控制第一个手风琴。

请看下面的例子

由于我不知道用户一次可以生成多少次这个"窗格"，是否有一个好的方法来处理这种事情?

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

深交的

它们应该具有唯一的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有许多不同的方法。

属性data-target必须与accordion body id相同。

参见示例:

<div class="panel panel-default">
    <div class="panel-heading">
        <a data-toggle="collapse" data-target="#accordionTwo" data-parent="#accordion"></a>
    </div>
    <div id="accordionTwo" class="panel-collapse collapse in">
        <div class="panel-body">
             <div class="">CONTENT 2</div>
        </div>
    </div>
 </div
相关文章：