在优势网格中，当点击另一个分区时，一个分区的卡片主体会折叠。 然而，另一个网格没有发生同样的情况（不利）。 当我们点击缺点部分的一个分区时，然后当我们点击另一个缺点部分的分区部分时没有被折叠。 然而，这在优势部分正在发生。 我已在下面添加了代码段。
<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。
答案 0 :(得分：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>