CSS手风琴焦点颜色，点击关闭

Question

我使用HTML和CSS制作了一个手风琴菜单，但我面临一个问题:

我可以用'-'按钮关闭菜单，但其中一个将始终保持打开状态。我怎样才能在需要的时候关闭所有的问题(如果我选择打开两个问题，甚至同时打开三个问题)?

谢谢。

.wizard-faq-section {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: "Montserrat", sans-serif;
}
.faq-container {
width: 100%;
margin: 0 auto;
max-width: 30em;
}
.accordion-link {
font-size: 0.875rem;
font-weight: 600;
border: 1px solid #f3f4f6;
border-radius: 4px;
margin-bottom: 0.9em;
padding: 0.5em 0 0.5em 2em;
text-decoration: none;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-link:focus {
background-color: #f3f4f6;
}
.accordion-link:hover {
color: #1468a0;
}
.accordion-link span {
color: #6366f1;
padding: .5rem;
}
.accordion-icon-remove {
display: none;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 650ms;
}
.faq-answer::before {
content: "";
position: absolute;
width: .6rem;
height: 90%;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.faq-answer p {
font-size: 0.875rem;
padding-left: 2em;
color: #6b7280
}
.accordion-item:target .faq-answer {
max-height: 20rem;
}
.accordion-item:target .accordion-link .accordion-icon-add {
display: none;
}
.accordion-item:target .accordion-link .accordion-icon-remove {
display: block;
}

<section class="wizard-faq-section">

<div class="faq-container">
<div class="faq-accordion">
<div class="accordion-item" id="faq-item-1">
<a class="accordion-link" href="#faq-item-1">
Q1
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa corrupti magni praesentium velit quo eum unde, accusamus dolorum cum eligendi!</p>
</div>
</div>
<div class="accordion-item" id="faq-item-2">
<a class="accordion-link" href="#faq-item-2">
Q2
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate cum laborum voluptates mollitia suscipit dicta ut temporibus. Nostrum provident dolorem, voluptatem sunt veniam maxime animi. Quisquam sit repudiandae reiciendis illo iusto nostrum harum, eius laudantium quidem et saepe provident doloremque blanditiis magni tenetur nulla autem eum, nemo veritatis? Itaque.</p>
</div>
</div>
<div class="accordion-item" id="faq-item-3">
<a class="accordion-link" href="#faq-item-3">
Q3
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quis, pariatur nesciunt quaerat alias aspernatur laudantium eaque sapiente veritatis nobis reiciendis adipisci, beatae aliquam dicta illum consectetur, reprehenderit quisquam non ad eum laboriosam illo eligendi ipsam quia. Hic, commodi eum!</p>
</div>
</div>
</div>
</div>
</section>

Answer 1

有很多事情结束了。
首先，您没有使用js，并期望从css获得更多

我已经使它的工作通过使用JavaScript和类的切换，活动/点击项目

<标题>

片段:

document.querySelectorAll(".accordion-link").forEach(function(item) {
item.onclick = function() {
if (!(document.querySelector(".accordion-link.clicked") == null) && !(document.querySelector(".accordion-link.clicked") == item)) {
document.querySelector(".accordion-link.clicked").classList.toggle("clicked");
}
document.activeElement.classList.toggle("clicked");
};
});

.wizard-faq-section {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: "Montserrat", sans-serif;
}
.faq-container {
width: 100%;
margin: 0 auto;
max-width: 30em;
}
.accordion-link {
font-size: 0.875rem;
font-weight: 600;
border: 1px solid #f3f4f6;
border-radius: 4px;
margin-bottom: 0.9em;
padding: 0.5em 0 0.5em 2em;
text-decoration: none;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-link.clicked {
background-color: #f3f4f6;
}
.accordion-link:hover {
color: #1468a0;
}
.accordion-link span {
color: #6366f1;
padding: .5rem;
}
.accordion-icon-remove {
display: none;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 650ms;
}
.faq-answer::before {
content: "";
position: absolute;
width: .6rem;
height: 90%;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.faq-answer p {
font-size: 0.875rem;
padding-left: 2em;
color: #6b7280
}
.clicked+.faq-answer {
max-height: 20rem;
}
.clicked .accordion-icon-add {
display: none;
}
.clicked .accordion-icon-remove {
display: block;
}

<section class="wizard-faq-section">
<div class="faq-container">
<div class="faq-accordion">
<div class="accordion-item" id="faq-item-1">
<a class="accordion-link" href="#faq-item-1">
Q1
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa corrupti magni praesentium velit quo eum unde, accusamus dolorum cum eligendi!</p>
</div>
</div>
<div class="accordion-item" id="faq-item-2">
<a class="accordion-link" href="#faq-item-2">
Q2
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate cum laborum voluptates mollitia suscipit dicta ut temporibus. Nostrum provident dolorem, voluptatem sunt veniam maxime animi. Quisquam sit repudiandae reiciendis illo iusto
nostrum harum, eius laudantium quidem et saepe provident doloremque blanditiis magni tenetur nulla autem eum, nemo veritatis? Itaque.</p>
</div>
</div>
<div class="accordion-item" id="faq-item-3">
<a class="accordion-link" href="#faq-item-3">
Q3
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quis, pariatur nesciunt quaerat alias aspernatur laudantium eaque sapiente veritatis nobis reiciendis adipisci, beatae aliquam dicta illum consectetur, reprehenderit quisquam non
ad eum laboriosam illo eligendi ipsam quia. Hic, commodi eum!</p>
</div>
</div>
</div>
</div>
</section>