Question

我的Bootstrap折叠代码为：

  <section class="download bg-primary text-center">
    <div class="container">
      <div class="row">
    <div class="col-12 col-md-2">
       <a href="#breaker1" class="btn btn-dark btn2" role="button"> <span>1</span> </a>
    </div>
    <div class="col-12 col-md-2">
       <a href="#breaker2" class="btn btn-primary btn2" role="button"> <span>2</span> </a>
    </div>




<div id="breaker1" class="byspace" style="width:99%;padding-left:15px;">
<div id="accordion">
  <div class="btn btn-dark btn2" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style="color:#d0cfcf">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
                .....................................
      </div>
    </div>
  </div>
  <div class="btn btn-dark btn2" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="color:#d0cfcf">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
                .....................................
      </div>
    </div>
  </div>
  <div class="btn btn-dark btn2" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" style="color:#d0cfcf">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
                .....................................
      </div>
    </div>
  </div>
</div>
</div>




<div id="breaker2" class="byspace" style="width:99%;padding-left:15px;">
<div id="accordion">
  <div class="btn btn-primary btn2 collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
    <div class="card-header" id="heading2">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour" style="color:#d0cfcf">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseFour" class="collapse" aria-labelledby="heading2" data-parent="#accordion">
      <div class="card-body">
        .....................................
      </div>
    </div>
  </div>
  <div class="btn btn-primary btn2" data-toggle="collapse" data-target="#collapse5" aria-expanded="false" aria-controls="collapse5">
    <div class="card-header" id="heading3">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse5" aria-expanded="false" aria-controls="collapse5" style="color:#d0cfcf">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapse5" class="collapse" aria-labelledby="heading3" data-parent="#accordion">
      <div class="card-body">
                .....................................
      </div>
    </div>
  </div>
  <div class="btn btn-primary btn2" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapse6" aria-expanded="false" aria-controls="collapse6" style="color:#d0cfcf">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapse6" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
                .....................................

      </div>
    </div>
  </div>
</div>
</div>
</div>
</div>
</section>

在第一次崩溃中，一切都很好

但是在第二次崩溃中，“隐藏”卡无法正常工作

它们都在一行中。

我无法像第一次折叠一样将卡片隐藏在第二个手风琴中

当我尝试在第一个合拢中单击其中一个卡片时，我看到另一个合拢正确隐藏了

但是在第二次崩溃中，我看不到这个结果

如何解决此问题？

Answer 1

手风琴应具有不同的（唯一）标识符。目前，两个手风琴都有<section [ngClass]="value ? 'active' : 'inactive'"></section> ...

id="accordion"

https://codeply.com/p/oofOtgnePC

为什么在引导程序中同时崩溃显示2张卡？

1 个答案: