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

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>

enter code here

标签： javascriptjqueryhtmlcssaccordion

Answer 1

问题在于这条修改后的线路。

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

只需添加“。” 字符来定义元素的类名。