html - BS 网格工作不相同

Question

在优势网格中，当单击另一个分区时，一个分区的卡体会折叠。然而，另一个网格并没有发生同样的情况(缺点)。当我们单击劣势部分的一个分区时，当我们再次单击劣势部分的另一个分区时，它不会被折叠。然而，这是在优势部分发生的。我在下面包含了代码片段。

<section id="explore-section" class="bg-light text-muted py-5">
  <div class="container">

    <div class="row">
      <div class="col-md-6">

        <h3>
          <p class="text-center bg-dark py-2" id="advantages">Advantages</p>
        </h3>
        <div id="accordion" role="tablist">

          <div class="card">
            <div class="card-header" id="heading1">
              <h5 class="mb-0">
                <div href="#collapse1" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i> Reduces iron levels
                </div>
              </h5>
            </div>

            <div id="collapse1" class="collapse text-justify">
              <div class="card-body">
                Iron is a mineral that the body needs to produce red blood cells.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="heading2">
              <h5 class="mb-0">
                <div href="#collapse2" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i> Identifies adverse health effects
                </div>
              </h5>
            </div>

            <div id="collapse2" class="collapse text-justify">
              <div class="card-body">
                Each person who donates blood completes a simply physical examination and short blood test before giving blood.


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

          <div class="card">
            <div class="card-header" id="heading3">
              <h5 class="mb-0">
                <div href="#collapse3" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i>Helps people feel good about themselves
                </div>
              </h5>
            </div>

            <div id="collapse3" class="collapse text-justify">
              <div class="card-body">

                Donating blood has the power to impact up to three people who need the blood to survive.


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


          <div class="card">
            <div class="card-header" id="heading4">
              <h5 class="mb-0">
                <div href="#collapse4" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i>Burns calories
                </div>
              </h5>
            </div>

            <div id="collapse4" class="collapse text-justify">
              <div class="card-body">

                Donating blood burns up to 650 calories per donation, according to the St.
              </div>
            </div>
          </div>

        </div>
      </div>


      <div class="col-md-6">

        <h3>
          <p class="text-center bg-dark py-2" id="disadvantages">Disadvantages</p>
        </h3>
        <div id="accordion" role="tablist">

          <div class="card">
            <div class="card-header" id="headingOne">
              <h5 class="mb-0">
                <div href="#collapseOne" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i> Pain
                </div>
              </h5>
            </div>

            <div id="collapseOne" class="collapse  text-justify">
              <div class="card-body">
                The site of the needle's insertion may be painful.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="headingTwo">
              <h5 class="mb-0">
                <div href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i> Weakness
                </div>
              </h5>
            </div>

            <div id="collapseTwo" class="collapse text-justify">
              <div class="card-body">

                After donating a pint of blood, a person may feel faint or dizzy, and these symptoms are common.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="headingThree">
              <h5 class="mb-0">
                <div href="#collapseThree" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i> Dizziness, Lightheadedness, and Nausea
                </div>
              </h5>
            </div>

            <div id="collapseThree" class="collapse  text-justify">
              <div class="card-body">

                After your donation is complete, you will be told to sit in an observation area for 15 minutes.


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


          <div class="card">
            <div class="card-header" id="headingFour">
              <h5 class="mb-0">
                <div href="#collapseFour" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i>Bruising
                </div>
              </h5>
            </div>

            <div id="collapseFour" class="collapse  text-justify">
              <div class="card-body">

                When you donate blood, you sit or lie on a reclining chair with your arm extended on an armrest.
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>

  </div>

  </div>

</section>

网页我用的是bootstrap 4，html5。

Answer 1

这里的问题是您在 html 中使用了相同的 id accordion 两次。你必须更换它。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<section id="explore-section" class="bg-light text-muted py-5">
  <div class="container">

    <div class="row">
      <div class="col-md-6">

        <h3>
          <p class="text-center bg-dark py-2" id="advantages">Advantages</p>
        </h3>
        <div id="accordion" role="tablist">

          <div class="card">
            <div class="card-header" id="heading1">
              <h5 class="mb-0">
                <div href="#collapse1" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i> Reduces iron levels
                </div>
              </h5>
            </div>

            <div id="collapse1" class="collapse text-justify">
              <div class="card-body">
                Iron is a mineral that the body needs to produce red blood cells.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="heading2">
              <h5 class="mb-0">
                <div href="#collapse2" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i> Identifies adverse health effects
                </div>
              </h5>
            </div>

            <div id="collapse2" class="collapse text-justify">
              <div class="card-body">
                Each person who donates blood completes a simply physical examination and short blood test before giving blood.


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

          <div class="card">
            <div class="card-header" id="heading3">
              <h5 class="mb-0">
                <div href="#collapse3" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i>Helps people feel good about themselves
                </div>
              </h5>
            </div>

            <div id="collapse3" class="collapse text-justify">
              <div class="card-body">

                Donating blood has the power to impact up to three people who need the blood to survive.


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


          <div class="card">
            <div class="card-header" id="heading4">
              <h5 class="mb-0">
                <div href="#collapse4" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i>Burns calories
                </div>
              </h5>
            </div>

            <div id="collapse4" class="collapse text-justify">
              <div class="card-body">

                Donating blood burns up to 650 calories per donation, according to the St.
              </div>
            </div>
          </div>

        </div>
      </div>


      <div class="col-md-6">

        <h3>
          <p class="text-center bg-dark py-2" id="disadvantages">Disadvantages</p>
        </h3>
        <div id="accordion2" role="tablist">

          <div class="card">
            <div class="card-header" id="headingOne">
              <h5 class="mb-0">
                <div href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">
                  <i class="fa fa-chevron-down float-right"></i> Pain
                </div>
              </h5>
            </div>

            <div id="collapseOne" class="collapse  text-justify">
              <div class="card-body">
                The site of the needle's insertion may be painful.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="headingTwo">
              <h5 class="mb-0">
                <div href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">
                  <i class="fa fa-chevron-down float-right"></i> Weakness
                </div>
              </h5>
            </div>

            <div id="collapseTwo" class="collapse text-justify">
              <div class="card-body">

                After donating a pint of blood, a person may feel faint or dizzy, and these symptoms are common.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="headingThree">
              <h5 class="mb-0">
                <div href="#collapseThree" data-toggle="collapse" data-parent="#accordion2">
                  <i class="fa fa-chevron-down float-right"></i> Dizziness, Lightheadedness, and Nausea
                </div>
              </h5>
            </div>

            <div id="collapseThree" class="collapse  text-justify">
              <div class="card-body">

                After your donation is complete, you will be told to sit in an observation area for 15 minutes.


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


          <div class="card">
            <div class="card-header" id="headingFour">
              <h5 class="mb-0">
                <div href="#collapseFour" data-toggle="collapse" data-parent="#accordion2">
                  <i class="fa fa-chevron-down float-right"></i>Bruising
                </div>
              </h5>
            </div>

            <div id="collapseFour" class="collapse  text-justify">
              <div class="card-body">

                When you donate blood, you sit or lie on a reclining chair with your arm extended on an armrest.
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>

  </div>



</section>