如何用CSS实现带弧形连接的Grid可折叠/展开详情区域

针对你的需求，我们可以通过调整HTML结构、新增CSS样式和简单的JavaScript逻辑，实现所有Grid同步展开/折叠的详情区域，同时保留弧形连接效果。以下是完整实现代码：

修改后的HTML #

<div class="top-panel">
  <div class="grid">
    <div class="grid-header">
      <div class="count">23450</div>
      <div class="icon toggle-btn"><i class="fas fa-chevron-down"></i></div>
    </div>
    <div class="grid-body">
      <div class="label">XXXXX</div>
      <div class="count">34</div>
    </div>
    <div class="grid-body">
      <div class="label">YYYYY</div>
      <div class="count">1</div>
    </div>
    <!-- 新增详情区域 -->
    <div class="grid-details">
      <p>这是该Grid的详细内容</p>
      <p>可添加更多自定义信息</p>
    </div>
  </div>
  <!-- 其余Grid重复上述结构，均添加grid-details模块 -->
  <div class="grid">
    <div class="grid-header">
      <div class="count">23450</div>
      <div class="icon toggle-btn"><i class="fas fa-chevron-down"></i></div>
    </div>
    <div class="grid-body">
      <div class="label">XXXXX</div>
      <div class="count">34</div>
    </div>
    <div class="grid-body">
      <div class="label">YYYYY</div>
      <div class="count">1</div>
    </div>
    <div class="grid-details">
      <p>这是第二个Grid的详细内容</p>
    </div>
  </div>
  <div class="grid">...</div>
  <div class="grid">...</div>
  <div class="grid">...</div>
</div>

更新后的CSS #

.top-panel {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;
  padding: 20px;
}

.grid {
  border: 1px solid #ccc;
  border-radius: 10px;
  /* 移除overflow:hidden，避免遮挡下方弧形详情区 */
  background-color: #fff;
  transition: border-radius 0.3s ease;
}

/* 展开时移除Grid底部圆角，与详情区弧形衔接 */
.grid.expanded {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.grid-header .count {
  font-size: 23px
}

.grid-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  border-bottom: 1px solid #ccc;
}

.count {
  font-weight: bold;
}

.icon {
  font-size: 20px;
  color: #ff9800;
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* 展开时旋转图标 */
.grid.expanded .toggle-btn i {
  transform: rotate(180deg);
}

.label {
  font-weight: bold;
}

/* 详情区域样式，实现弧形连接 */
.grid-details {
  border: 1px solid #ccc;
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: #fff;
}

.grid.expanded .grid-details {
  max-height: 200px; /* 根据实际内容调整高度 */
}

/* Media Queries */
@media screen and (max-width: 767px) {
  .top-panel {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 479px) {
  .top-panel {
    grid-template-columns: 1fr;
  }
}

JavaScript 逻辑 #

// 获取所有切换按钮
const toggleBtns = document.querySelectorAll('.toggle-btn');

// 给每个按钮绑定点击事件
toggleBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 遍历所有Grid元素，同步切换展开/折叠状态
    document.querySelectorAll('.grid').forEach(grid => {
      grid.classList.toggle('expanded');
    });
  });
});

关键实现说明 #

1. 弧形连接效果：给详情区设置底部圆角，同时在Grid展开时移除自身底部圆角，实现两者的自然弧形衔接。
2. 同步展开/折叠：点击任意切换按钮时，通过JavaScript遍历所有Grid元素，切换expanded类来统一控制详情区的显示/隐藏。
3. 平滑过渡：为max-height、border-radius和图标旋转添加过渡动画，让展开/折叠过程更流畅。
4. 样式兼容：移除原Grid的overflow:hidden属性，避免遮挡下方详情区域，同时保持Grid主体与详情区的样式一致性。

内容的提问来源于stack exchange，提问作者Alex Man