时间戳

首页 > 解决方案 > JS手风琴功能

javascript - JS手风琴功能

问题描述

我的函数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>
谢谢 ：）

标签： javascript

解决方案

你不应该需要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);
  });
})

推荐阅读