我有以下 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>答案 0 :(得分：1)
在切换 active 类之前，您应该为已经展开的元素（如果有）移除它
var acc = document.getElementsByClassName("btn-block");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
// look for any expanded accordion
var alreadyExpanded = document.querySelector('.btn-block.active');
// does it exist and it's not the current selected?
if (!!alreadyExpanded && alreadyExpanded != this) {
// well, let's collapse it.
alreadyExpanded.classList.remove('active');
}
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>