Question

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

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...您不需要查看父元素来获取标签和内容，因为它们是容器的直接子元素：

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');
    });
  });
};

JS手风琴功能

2 个答案: