JS accordion函数

Question

我有一个问题，我的函数console.log在单击之后返回3xexample，并且类open没有添加。你能看看我的代码吗？

const accordionFunction = () => {
  const accordionProduct = document.querySelectorAll(
    '.cost-accordion__content-box ',
  );
  // eslint-disable-next-line no-plusplus
  accordionProduct.forEach((element) => {
    const accordionLabel = element.parentElement.querySelector(
      '.cost-accordion__label',
    );
    const accordionContent = element.parentElement.querySelector(
      '.cost-accordion__content',
    );
    accordionLabel.addEventListener('click', () => {
      console.log('example');
      accordionLabel.classList.toggle('active');
      accordionContent.classList.toggle('active');
    });
  });

}；

<div class="cost-accordion"
  <div class="cost-accordion__content-box">
    <div class="cost-accordion__label cost-accordion__subtitle">abc</div>
    <div class="cost-accordion__content cost-accordion__description"> bcd</div>
  </div>
  <div class="cost-accordion__content-box">
    <div class="cost-accordion__label cost-accordion__subtitle">abc</div>
    <div class="cost-accordion__content cost-accordion__description"> bcd</div>
  </div>
  <div class="cost-accordion__content-box">
    <div class="cost-accordion__label cost-accordion__subtitle">abc</div>
    <div class="cost-accordion__content cost-accordion__description"> bcd</div>
  </div>
</div>

谢谢:)

Answer 1

您不应该需要parentElement...you不需要查看父元素来获取标签和内容，因为它们是容器的直接子元素：

const accordionLabel = element.querySelector(
  '.cost-accordion__label',
);
const accordionContent = element.querySelector(
  '.cost-accordion__content',
);

调试这种情况的一种方法是记录元素，并查看预期的元素是否出现在控制台中：

accordionProduct.forEach((element) => {
  accordionLabel.addEventListener('click', () => {
    console.log('element', element);
  });
})

Answer 2

谢谢，它起作用了。我的js函数现在：

const accordionFunction = () => {
  const accordionProduct = document.querySelectorAll(
    '.cost-accordion__content-box ',
  );
  accordionProduct.forEach((element) => {
    const accordionLabel = element.querySelector('.cost-accordion__label');
    const accordionContent = element.querySelector('.cost-accordion__content');
    accordionLabel.addEventListener('click', () => {
      accordionLabel.classList.toggle('open');
      accordionContent.classList.toggle('open');
    });
  });
};