默认手风琴按钮错误

手风琴是一种常见的 UI 组件，但有时默认的按钮样式可能不符合设计要求。为了解决这个问题，可以对手风琴按钮进行自定义样式设计。以下是一个示例：

HTML 代码：

<div class="accordion">
  <button class="accordion-button">Section 1</button>
  <div class="accordion-panel">
    <p>Content for section 1</p>
  </div>
  <button class="accordion-button">Section 2</button>
  <div class="accordion-panel">
    <p>Content for section 2</p>
  </div>
</div>

CSS 代码：

/* 隐藏 accordion-panel 元素 */
.accordion-panel {
  display: none;
}

/* 更改默认按钮样式 */
.accordion-button {
  background-color: dodgerblue;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

/* 鼠标悬停时更改按钮样式 */
.accordion-button:hover {
  background-color: deepskyblue;
}

/* 打开手风琴项时更改按钮样式 */
.active {
  background-color: deepskyblue;
}

/* 显示当前手风琴的内容 */
.active + .accordion-panel {
  display: block;
}

JavaScript 代码：

// 获取所有手风琴按钮
var accordionButtons = document.querySelectorAll('.accordion-button');

// 为每个按钮添加点击事件监听器
accordionButtons.forEach(function(button) {
  button.addEventListener('click', function() {

    // 切换按钮的 active 类
    this.classList.toggle('active');

    // 获取与按钮关联的 panel 元素
    var panel = this.nextElementSibling;

    // 如果 panel 元素存在，则切换其显示/隐藏状态
    if (panel) {
      panel.classList.toggle('active');
    }
  });
});

通过以上代码示例，我们可以