Html 为什么在引导过程中同时显示两张卡？_Html_Css_Bootstrap 4

Html 为什么在引导过程中同时显示两张卡？

html css bootstrap-4

Html 为什么在引导过程中同时显示两张卡？,html,css,bootstrap-4,Html,Css,Bootstrap 4,我的引导折叠代码是： <section class="download bg-primary text-center"> <div class="container"> <div class="row"> <div class="col-12 col-md-2"> <a href="#breaker1&quo

我的引导折叠代码是：

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


可折叠组项目#1
.....................................
可折叠组项目#2
.....................................
可折叠组项目#3
.....................................
可折叠组项目#1
.....................................
可折叠组项目#2
.....................................
可折叠组项目#3
.....................................

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

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

他们两人都在一排之内

我不能像第一次折叠一样在第二次手风琴中隐藏卡片

当我尝试在第一次折叠中单击其中一张卡时，我看到另一张折叠正确隐藏

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

如何解决此问题？

手风琴应具有不同的（唯一的）标识符。目前，两个手风琴都有

id=“accordion”

    <div class="row">
            <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="accordion2">
                    <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="#accordion2">
                            <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="#accordion2">
                            <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="#accordion2">
                            <div class="card-body"> ..................................... </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


可折叠组项目#1
..................................... 
可折叠组项目#2
..................................... 
可折叠组项目#3
..................................... 
可折叠组项目#1
..................................... 
可折叠组项目#2
..................................... 
可折叠组项目#3
.....................................