用代码实现手风琴式卡片展开效果

手风琴式折叠卡片展示效果是一种交互式设计，它允许用户通过点击交互来查看一系列内容。这种效果通常用于展示图片、照片或文字，其特点是：当我们点击任意一张照片时，那张照片像手风琴一样缓缓展开，其他照片像手风琴一样缓缓折叠起来。这种效果可以提升用户体验，使内容展示更加生动有趣。

实现手风琴式折叠卡片展开效果，需要使用 JavaScript 和 CSS 代码。首先，我们需要使用 HTML 代码创建卡片结构，然后使用 CSS 代码设置卡片的样式和布局。最后，使用 JavaScript 代码添加交互功能，让卡片在点击时能够展开和折叠。

以下是一个实现手风琴式折叠卡片展开效果的代码示例：

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-item-header">
      <h2>Card 1</h2>
    </div>
    <div class="accordion-item-content">
      <p>Content for Card 1</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      <h2>Card 2</h2>
    </div>
    <div class="accordion-item-content">
      <p>Content for Card 2</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      <h2>Card 3</h2>
    </div>
    <div class="accordion-item-content">
      <p>Content for Card 3</p>
    </div>
  </div>
</div>

.accordion {
  display: flex;
  flex-direction: column;
}

.accordion-item {
  width: 100%;
}

.accordion-item-header {
  padding: 1rem;
  cursor: pointer;
}

.accordion-item-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.accordion-item-content.active {
  max-height: 100px;
}

const accordionItems = document.querySelectorAll('.accordion-item');

accordionItems.forEach((item) => {
  const header = item.querySelector('.accordion-item-header');
  const content = item.querySelector('.accordion-item-content');

  header.addEventListener('click', () => {
    content.classList.toggle('active');
  });
});

通过使用这些代码，我们可以实现一个手风琴式折叠卡片展示效果，当我们点击任意一张卡片时，那张卡片会像手风琴一样缓缓展开，而其他卡片则像手风琴一样缓缓折叠起来。这种效果可以应用于各种场景，例如展示产品、展示图片或创建交互式内容。