HTML CSS : One Bootstrap Collapsible is affecting Others on a Page

Question

如果我在 Bootstrap 可折叠页面中复制此代码两次，一个切换按钮将影响其他切换，导致所有内容展开或折叠。

我该如何解决这个问题？每个可折叠物应该只影响它自己的集合。

最终目标是将可折叠组件作为共享组件。所以如果我在一个页面中复制3、4、5、100次，其他的应该不会受到影响。 (稍后将使用 C# 扩展方法)。

https://getbootstrap.com/docs/4.0/components/collapse/

请在一个页面中复制两次代码。

<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
    <!-- Accordion card -->
    <div class="card">
        <!-- Card header -->
        <div class="card-header" role="tab" id="headingOne1">
            <a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true"
               aria-controls="collapseOne1">
                <h5 class="mb-0">
                    Collapsible Group Item #1 <i class="fas fa-angle-down rotate-icon"></i>
                </h5>
            </a>
        </div>

        <!-- Card body -->
        <div id="collapseOne1" class="collapse show" role="tabpanel" aria-labelledby="headingOne1"
             data-parent="#accordionEx">
            <div class="card-body">
                1111 test
            </div>
        </div>

    </div>
    <!-- Accordion card -->
    <!-- Accordion card -->
    <div class="card">

        <!-- Card header -->
        <div class="card-header" role="tab" id="headingTwo2">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2"
               aria-expanded="false" aria-controls="collapseTwo2">
                <h5 class="mb-0">
                    Collapsible Group Item #2 <i class="fas fa-angle-down rotate-icon"></i>
                </h5>
            </a>
        </div>

        <!-- Card body -->
        <div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
             data-parent="#accordionEx">
            <div class="card-body">
                2222 test
            </div>
        </div>
    </div>
    <!-- Accordion card -->
    <!-- Accordion card -->
    <div class="card">

        <!-- Card header -->
        <div class="card-header" role="tab" id="headingThree3">
            <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseThree3"
               aria-expanded="false" aria-controls="collapseThree3">
                <h5 class="mb-0">
                    Collapsible Group Item #3 <i class="fas fa-angle-down rotate-icon"></i>
                </h5>
            </a>
        </div>

        <!-- Card body -->
        <div id="collapseThree3" class="collapse" role="tabpanel" aria-labelledby="headingThree3"
             data-parent="#accordionEx">
            <div class="card-body">
                3333 test
            </div>
        </div>

    </div>
    <!-- Accordion card -->
</div>

希望隔离该行为。想避免使用 javascript 路由，但如果需要的话也没关系。也许与共享相同 ID、数据 parent 等的每个人有关。

Answer 1

当使用 Bootstrap 的 Accordion 时, 特别是当你只是复制卡片时，不要忘记检查卡片主体的 id MUST 是唯一的并且 href卡片标题必须匹配。

错误 (两个卡体有相同的id，即collapseOne):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Body of Collapsible #1
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseOne" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Body of Collapsible #2
      </div>
    </div>
  </div>
</div>

正确 (每个卡体都有自己的id):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Body of Collapsible #1
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Body of Collapsible #2
      </div>
    </div>
  </div>
</div>