如何为手风琴元素添加类

Question

我有一个手风琴。当您单击accordon标头时，它将打开，活动类将添加到标头中。我需要将活动类添加到手风琴的整个项目中，该项目也被单击。我该怎么做？我需要为"0"设置活动类；手风琴项目"；

const accordionItemHeaders = document.querySelectorAll(
".accordion-item-header"
);
accordionItemHeaders.forEach((accordionItemHeader) => {
accordionItemHeader.addEventListener("click", () => {
accordionItemHeader.classList.toggle("active");
const accordionItemBody = accordionItemHeader.nextElementSibling;
if (accordionItemHeader.classList.contains("active")) {
accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
} else {
accordionItemBody.style.maxHeight = 0;
}
});
});

<div class="question-content_accordion">
<div class="accordion-item">
<div class="accordion-item-header">
Title1
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
<p>Text1</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
Title2
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
<p>Text2</p>
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
Title3
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
<p>Text3</p>
</div>
</div>
</div>
</div>

Answer 1

您可能想要.closest()方法。

const accordionItemHeaders = document.querySelectorAll(
".accordion-item-header"
);
accordionItemHeaders.forEach((accordionItemHeader) => {
accordionItemHeader.addEventListener("click", () => {
accordionItemHeader.classList.toggle("active");
accordionItemHeader.closest(".accordion-item").classList.toggle("active"); // NEW
const accordionItemBody = accordionItemHeader.nextElementSibling;
if (accordionItemHeader.classList.contains("active")) {
accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
} else {
accordionItemBody.style.maxHeight = 0;
}
});
});

然而，另一种选择是使用details元素，因为这将在不使用任何JavaScript的情况下完成所需的一切，并在内容可见时添加open属性。

<div class="question-content_accortion">
<details class="accordion-item">
<summary class="accordion-item-body">Text1</summary>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
<p>Text1</p>
</div>
</div>
</details>
<details class="accordion-item">
<summary class="accordion-item-body">Text2</summary>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
<p>Text2</p>
</div>
</div>
</details>
<details class="accordion-item">
<summary class="accordion-item-body">Text3</summary>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
<p>Text3</p>
</div>
</div>
</details>
</div>