【发布时间】：2021-03-01 17:27:46
【问题描述】：
我有以下 CodePen：
https://codepen.io/LiemLT/pen/zYojvGb
当我单击标题按钮时，它将显示卡片正文，并且 :after 元素将从“向下”变为“向上”。当我再次单击相同的标题按钮时，卡片主体将被折叠，并且 :after 元素将从“向上”变为“向下”。
问题来了：
单击标题按钮以显示卡片正文的内容后，我没有再次单击相同的标题按钮，而是单击兄弟元素的标题按钮，即卡片正文第一张卡片已关闭，但该标题按钮的 :after 元素仍处于“向上”状态。我需要解决这个问题。
对不起，如果我的解释含糊不清，英语不是我的母语。
var acc = document.getElementsByClassName("btn-block");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
});
}.qa {
background-color:#f7f7f7;
}
.qa .card {
margin-bottom: 1rem;
}
.qa .card-header {
background-color: #fff;
}
.qa .btn:focus {
box-shadow: none;
}
.qa .card-header .btn::after {
content: '\f078';
font-family: "Font Awesome 5 Free";
float: right;
font-size: 14px;
font-weight: 900;
}
.qa .card-header .btn.active::after {
content: '\f077';
font-family: "Font Awesome 5 Free";
float: right;
font-size: 14px;
font-weight: 900;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
<!-- Bootstrap 4.6 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<!-- FancyBox CSS -->
<link rel="stylesheet" href="./css/jquery.fancybox.css">
<!-- Start Selling CSS -->
<link rel="stylesheet" href="./css/start_selling.css">
<title>Start Selling on Fiverr</title>
</head>
<body>
<section class="qa">
<div class="container py-5">
<h2 class="text-center mb-5">Q&A</h2>
<div class="row">
<div class="col-lg-6 px-0">
<div class="accordion" id="accordionL">
<div class="card">
<div class="card-header" id="heading1">
<h2 class="mb-0">
<button class="btn btn-block text-left" type="button" data-toggle="collapse"
data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
What can I sell?
</button>
</h2>
</div>
<div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordionL">
<div class="card-body">
Be creative! You can offer any service you wish as long as it's legal and complies
with our terms. There are over 200 categories you can browse to get ideas.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2">
<h2 class="mb-0">
<button class="btn btn-block text-left collapsed" type="button"
data-toggle="collapse" data-target="#collapse2" aria-expanded="false"
aria-controls="collapse2">
How much money can I make?
</button>
</h2>
</div>
<div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordionL">
<div class="card-body">
It's totally up to you. You can work as much as you want. Many sellers work on
Fiverr full time and some keep their 9-5 job while using Fiverr to make extra money.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading3">
<h2 class="mb-0">
<button class="btn btn-block text-left collapsed" type="button"
data-toggle="collapse" data-target="#collapse3" aria-expanded="false"
aria-controls="collapse3">
How much does it cost
</button>
</h2>
</div>
<div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordionL">
<div class="card-body">
It's free to join Fiverr. There is no subscription required or fees to list your
services. You keep 80% of each transaction.
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 px-0">
<div class="accordion" id="accordionR">
<div class="card">
<div class="card-header" id="heading4">
<h2 class="mb-0">
<button class="btn btn-block text-left" type="button" data-toggle="collapse"
data-target="#collapse4" aria-expanded="true" aria-controls="collapse4">
How much time will I need to invest?
</button>
</h2>
</div>
<div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordionR">
<div class="card-body">
It's very flexible. You need to put in some time and effort in the beginning to
learn the marketplace and then you can decide for yourself what amount of work you
want to do.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading5">
<h2 class="mb-0">
<button class="btn btn-block text-left collapsed" type="button"
data-toggle="collapse" data-target="#collapse5" aria-expanded="false"
aria-controls="collapse5">
How do I price my service?
</button>
</h2>
</div>
<div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordionR">
<div class="card-body">
With Gig Packages, you set your pricing anywhere from $5 - $995 and offer three
versions of your service at three different prices.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading6">
<h2 class="mb-0">
<button class="btn btn-block text-left collapsed" type="button"
data-toggle="collapse" data-target="#collapse6" aria-expanded="false"
aria-controls="collapse6">
How do I get paid?
</button>
</h2>
</div>
<div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#accordionR">
<div class="card-body">
Once you complete a buyer's order, the money is transferred to your account. No need
to chase clients for payments and wait 60 or 90 days for a check.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="./js/jquery.fancybox.js"></script>
<script src="./js/start_selling.js"></script>
</body>【问题讨论】：
标签： javascript html css twitter-bootstrap frontend