手风琴显示隐藏下拉动画怎么写

要实现手风琴式的下拉动画，可以通过JavaScript或CSS来实现。下面是一种使用CSS的方法：

HTML代码：

<div class="accordion">
  <button class="accordion-header">标题1</button>
  <div class="accordion-panel">
    <p>内容1</p>
  </div>
  <button class="accordion-header">标题2</button>
  <div class="accordion-panel">
    <p>内容2</p>
  </div>
  <button class="accordion-header">标题3</button>
  <div class="accordion-panel">
    <p>内容3</p>
  </div>
</div>

CSS代码：

.accordion {
  border: 1px solid #ccc;
  border-radius: 5px;
}

.accordion-header {
  background-color: #eee;
  border: none;
  outline: none;
  padding: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-weight: bold;
}

.accordion-panel {
  padding: 10px;
  display: none;
}

.accordion-panel.show {
  display: block;
}

JavaScript代码：

const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
  header.addEventListener('click', () => {
    const panel = header.nextElementSibling;
    panel.classList.toggle('show');
  });
});

当用户点击手风琴的标题，对应的内容区域会显示出来，其他内容区域则会被隐藏。这里使用CSS的display属性来实现隐藏和显示，通过JavaScript来监听点击事件并动态地添加或删除CSS类来改变显示状态。