手风琴js幻灯片特效代码

手风琴（Accordion）效果是一种常见的网页交互设计，它允许用户通过点击来展开或折叠内容区域，通常用于节省页面空间并提供清晰的信息结构。以下是一个简单的手风琴效果的JavaScript实现，结合HTML和CSS。

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion Example</title>
<style>
  .accordion {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }
  .accordion-item {
    border-bottom: 1px solid #ddd;
  }
  .accordion-header {
    background-color: #f1f1f1;
    padding: 10px;
    cursor: pointer;
    user-select: none;
  }
  .accordion-content {
    padding: 0 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }
  .accordion-content.active {
    max-height: 500px; /* Adjust as needed */
    transition: max-height 0.3s ease-in;
  }
</style>
</head>
<body>

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">Section 1</div>
    <div class="accordion-content">
      <p>Content for section 1...</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">Section 2</div>
    <div class="accordion-content">
      <p>Content for section 2...</p>
    </div>
  </div>
  <!-- Add more sections as needed -->
</div>

<script>
  document.querySelectorAll('.accordion-header').forEach(header => {
    header.addEventListener('click', () => {
      const content = header.nextElementSibling;
      content.classList.toggle('active');
    });
  });
</script>

</body>
</html>

解释

HTML部分：创建了一个包含多个手风琴项的结构，每个项都有一个标题（.accordion-header）和一个内容区域（.accordion-content）。
CSS部分：设置了基本样式，包括过渡效果，使得内容区域的展开和折叠更加平滑。
JavaScript部分：为每个手风琴标题添加了点击事件监听器，当点击时，切换相应内容区域的active类，从而控制内容的显示和隐藏。