用CSS和JavaScript创建超文本标记语言折叠折叠

<div class="accordion">
  <button class="accordion-btn">折叠菜单</button>
  <div class="accordion-content">
    <p>折叠内容</p>
  </div>
</div>

.accordion-content {
  display: none;
}

.accordion-btn {
  background-color: #eee;
  color: #333;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: background-color 0.3s ease;
}

.accordion-btn.active {
  background-color: #ccc;
}

var accordionBtn = document.querySelector('.accordion-btn');
var accordionContent = document.querySelector('.accordion-content');

accordionBtn.addEventListener('click', function() {
  accordionContent.classList.toggle('active');
});