手风琴没有打开点击

Question

我正在尝试添加一个手风琴，但它没有打开

单击按钮时手风琴没有打开。

我的代码写在下面：

< script >
  document.querySelectorAll("accordion__button").forEach(button => {
    button.addEventListener("click", () => {
      const accordionContent = button.nextElementSibling;
      button.classList.toggle("accordion__button--active");
      if (button.classList.contains("accordion__button--active")) {
        accordionContent.style.maxHeight = accordionContent.scrollHeight + 'px';
      } else {
        accordionContent.style.maxHeight = 0;
      }
    });
  });

</script>

.accordion__button {
  display: block;
  width: 100%;
  padding: 15px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #333333;
  color: #ffffff;
  text-align: left;
  transition: background 0.2s;
}

.accordion__button::after {
  content: '\25be';
  float: right;
  transform: scale(1.5);
}

.accordion__button--active {
  background: #555555;
}

.accordion__button--active::after {
  content: '\25be';
}

.accordion__content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s;
  padding: 0 15px;
  font-family: sans-serif;
  background: #eeeeee;
}

<div class="accordion">
  <button type="button" class="accordion__button">FUP Plans</button>
  <div class="accordion__content">
    <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia </p>
  </div>
</div>

<script>  document.querySelectorAll("accordion__button").forEach(button => {
            button.addEventListener("click", () => {
                const accordionContent = button.nextElementSibling;
                button.classList.toggle("accordion__button--active");
                if (button.classList.contains("accordion__button--active")) {
                    accordionContent.style.maxHeight = accordionContent.scrollHeight + 'px';
                }
                else {
                    accordionContent.style.maxHeight = 0;
                }
            });
        });

</script>

.accordion__button {
    display: block;
    width: 100%;
    padding: 15px;
    border: none;
    outline: none;
    cursor: pointer;
    background: #333333;
    color: #ffffff;
    text-align: left;
    transition: background 0.2s;
}

.accordion__button::after {
    content: '\25be';
    float: right;
    transform: scale(1.5);
}

.accordion__button--active {
    background: #555555;
}

.accordion__button--active::after {
    content: '\25be';
}

.accordion__content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s;
    padding: 0 15px;
    font-family: sans-serif;
    background: #eeeeee;
}

<div class="accordion">
        <button type="button" class="accordion__button">FUP Plans</button>
        <div class="accordion__content" >
            <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia
 </p>
        </div>
    </div>

任何帮助将不胜感激！

Answer 1

问题出在这条经修改的行上。

  document.querySelectorAll(".accordion__button").forEach(button => { ... });

只需添加'。字符，用于定义元素的类名。