我不知道该如何逻辑地写那个问题，我几乎想出了窍门，但我在努力解决其他问题.当我点击一个元素并打开它时，我想点击另一个元素以打开，而之前打开的元素以关闭.然而，它不起作用.每当我单击另一个元素时，打开的元素只会关闭，而不会打开另一个元素.基本上，我只想在单击该特定元素时关闭该元素.或者，当我点击另一个按钮时(这很管用)，但在这种情况下，如果有意义的话，我也希望另一个打开.我在这一点上卡住了.
谢谢你的帮助.
这是我的密码笔:https://codepen.io/danosvk/pen/JjLEGMK
这是我的代码:
const questions = document.querySelectorAll("section");
const answers = document.querySelectorAll(".answer");
toggle = false
function open() {
for (let i = 0; i < answers.length; i++) {
answers[i].style.display = "none";
}
toggle = !toggle
this.lastElementChild.style.display = toggle ? "block" : "none"
}
questions.forEach((question) => question.addEventListener("click", open)); .card {
width: 20.4375rem;
background-color: #ffffff;
border-radius: 1.4375rem;
margin: auto;
padding: 132px 24px 48px;
text-align: center;
transform: translateY(-125px);
}
section {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e8e8ea;
flex-wrap: wrap;
}
p {
color: var(--main-text-color);
font-size: 0.75rem;
}
.answer {
flex-basis: 100%;
text-align: left;
display: none;
} <div class="card">
<h1 class="no">faq</h1>
<section>
<p class="question">How many team members can i invite?</p>
<img class="arrow" src="./images/icon-arrow-down.svg" alt="" />
<p class="answer">
You can invite up to 2 additional users on the Free plan. There is no
limit on team members for the Premium plan.
</p>
</section>
<section>
<p class="question">What is the maximum file upload size?</p>
<img class="arrow" src="./images/icon-arrow-down.svg" alt="" />
<p class="answer">
No more than 2GB. All files in your account must fit your allotted
storage space.
</p>
</section>
<section>
<p class="question">How do I reset my password?</p>
<img class="arrow" src="./images/icon-arrow-down.svg" alt="" />
<p class="answer">
Click “Forgot password” from the login page or “Change password” from
your profile page. A reset link will be emailed to you.
</p>
</section>
<section>
<p class="question">Can I cancel my subscription?</p>
<img class="arrow" src="./images/icon-arrow-down.svg" alt="" />
<p class="answer">
Yes! Send us a message and we’ll process your request no questions
asked.
</p>
</section>
<section>
<p class="question">Do you provide additional support?</p>
<img class="arrow" src="./images/icon-arrow-down.svg" alt="" />
<p class="answer">
Chat and email support is available 24/7. Phone lines are open during
normal business hours.
</p>
</section>