如何实现语义清晰、动画平滑的可折叠卡片组件（Collapsible Tile）-js教程-PHP中文网

如何实现语义清晰、动画平滑的可折叠卡片组件（Collapsible Tile）

本文详解如何基于 HTML/CSS/JS 构建一个点击即向下平滑展开、显示隐藏内容的蓝色卡片组件，采用 max-height 过渡 + overflow: hidden + CSS Grid 布局三重保障，彻底解决“文字覆盖”“高度塌陷”“定位错位”等常见问题。

本文详解如何基于 html/css/js 构建一个点击即向下平滑展开、显示隐藏内容的蓝色卡片组件，采用 `max-height` 过渡 + `overflow: hidden` + css grid 布局三重保障，彻底解决“文字覆盖”“高度塌陷”“定位错位”等常见问题。

在实际开发中，使用标签作为可折叠容器虽具语义意图（如导航跳转），但其默认 display: inline 行为与 position: absolute 结合时，极易破坏父级 Flex 或 Grid 布局流——导致 .hidden-text 脱离文档流、悬浮覆盖标题，或无法随高度变化自然撑开容器。根本症结在于：绝对定位 + 固定高度 + 兄弟节点结构，违背了“流式伸缩”的基本前提。

✅ 正确解法是：

将交互容器由改为语义中性但布局友好的
；
将隐藏内容（.hidden-text）设为 .rectangle 的直接子元素，而非同级兄弟；

放弃 height 硬编码过渡（不支持 height: auto 动画），改用 max-height + overflow: hidden 实现物理高度渐变；

采用 CSS Grid 布局定义结构归属（如 grid-template-rows: 1fr auto），让 DOM 层级关系驱动视觉伸缩逻辑。

以下为生产级推荐实现（已通过 Chrome/Firefox/Safari 验证）：

笔灵朱雀降AI

笔灵朱雀降AI是一款面向中文内容的AI检测与降AI痕迹工具。

下载



  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap" rel="stylesheet"><style>
    .tile-container {
      padding: 5px;
      font-family: 'PT Sans Narrow', sans-serif;
      font-size: 25px;
      max-width: 600px;
      margin: 0 auto;
    }

    .rectangle {
      background-color: #0051a5;
      border-radius: 1em;
      cursor: pointer;
      display: grid;
      /* 主标题占剩余空间，隐藏区初始高度为0 */
      grid-template-rows: 1fr 0fr;
      grid-template-columns: 1fr max-content;
      grid-template-areas: "label plus" "extratext extratext";
      overflow: hidden;
      transition: grid-template-rows 0.35s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .rectangle.expanded {
      grid-template-rows: 1fr auto; /* auto 触发内容撑高 */
    }

    .tile-label {
      grid-area: label;
      font-size: 1em;
      text-transform: uppercase;
      font-weight: 700;
      color: white;
      padding: 1em;
      margin: 0;
    }

    .plus {
      grid-area: plus;
      width: 1.2em;
      height: 1.2em;
      background:
        linear-gradient(#fff 0 0),
        linear-gradient(#fff 0 0),
        #0051a5;
      background-position: center;
      background-size: 60% 2px, 2px 60%;
      background-repeat: no-repeat;
      margin: 1em;
      transition: transform 0.35s ease;
      border-radius: 50%;
    }

    .rectangle.expanded .plus {
      transform: rotate(45deg);
    }

    .hidden-text {
      grid-area: extratext;
      font-size: 0.85em;
      color: #333;
      background-color: #f8f9fa;
      padding: 0.8em 1em;
      line-height: 1.5;
      overflow: hidden;
      /* 关键：配合 grid-template-rows auto 实现自然延展 */
    }
  </style><div class="tile-container">
    <div class="rectangle">
      <div class="tile-label">Sample <span class="tile-accent">Text</span>
</div>
      <div class="plus"></div>
      <div class="hidden-text">
        <ul style="margin: 0; padding-left: 1.5em;">
<li>Item 1: 详细说明内容</li>
          <li>Item 2: 支持多行文本与嵌套元素</li>
          <li>Item 3: 响应式安全，无溢出风险</li>
        </ul>
</div>
    </div>
  </div>

  <script>
    document.querySelector('.rectangle').addEventListener('click', function() {
      this.classList.toggle('expanded');
    });
  </script>