新手求助：如何实现点击Box全屏展开/收缩并显示文本？

要实现这个交互效果，需要结合CSS和JavaScript完成，以下是具体步骤及修改后的代码：

1. 调整HTML结构 #

新增隐藏容器存放更多文本，同时可以添加多个Box测试交互逻辑：

<div class="games">
  <div class="game-list">
    <img src="https://rideawavedesign.com/wp-content/uploads/2021/06/dnd-dice-level-up-birthday-card-1.jpg" style="width:140px; height: 140px;" />
    <h1 style=" color:#FFFFFF">Chapter 1: </h1>
    <p style=" color:#FFFFFF; font-size: 20px">Step-by-Step</p>
    <!-- 隐藏的更多文本容器 -->
    <div class="more-text">
      <p>这里是章节的详细介绍内容，点击Box后会完整展示出来。</p>
      <p>可以添加多行文本，展开后容器会自动适配高度。</p>
    </div>
  </div>
  <!-- 第二个测试Box -->
  <div class="game-list">
    <img src="https://rideawavedesign.com/wp-content/uploads/2021/06/dnd-dice-level-up-birthday-card-1.jpg" style="width:140px; height: 140px;" />
    <h1 style=" color:#FFFFFF">Chapter 2: </h1>
    <p style=" color:#FFFFFF; font-size: 20px">Advanced Guide</p>
    <div class="more-text">
      <p>第二章的进阶内容，测试点击其他Box时当前展开项会自动收缩。</p>
    </div>
  </div>
</div>

2. 更新CSS样式 #

添加展开状态的样式、过渡动画，以及更多文本的显示/隐藏逻辑：

.games {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  min-height: 100vh;
  background-color: #1a1a2e; /* 深色背景提升文字可读性 */
}

.game-list {
  margin: 30px;
  padding: 20px;
  height: 275px;
  width: 325px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid gray;
  background: rgba(255, 75, 255, 0.1);
  box-shadow: 0 8px 40px 0 rgba(45, 57, 231, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: all 0.3s ease; /* 平滑过渡所有属性变化 */
  cursor: pointer; /* 提示可点击 */
  overflow: hidden; /* 隐藏展开前溢出的文本 */
}

.game-list:hover {
  transform: scale(1.05);
}

/* 展开状态样式 */
.game-list.expanded {
  width: 90vw; /* 占窗口90%宽度，留边距 */
  height: auto; /* 高度自适应内容 */
  transform: scale(1); /* 取消hover缩放避免冲突 */
  align-items: flex-start; /* 长文本左对齐更友好 */
  padding: 30px;
}

/* 默认隐藏更多文本 */
.more-text {
  display: none;
  margin-top: 20px;
  color: #fff;
  line-height: 1.6;
}

/* 展开时显示更多文本 */
.game-list.expanded .more-text {
  display: block;
}

3. 添加JavaScript交互逻辑 #

处理点击事件，实现展开/收缩的切换及多Box互斥逻辑：

const gameBoxes = document.querySelectorAll('.game-list');

gameBoxes.forEach(box => {
  box.addEventListener('click', () => {
    const isExpanded = box.classList.contains('expanded');
    
    // 先关闭所有已展开的Box
    gameBoxes.forEach(item => item.classList.remove('expanded'));
    
    // 若当前Box未展开则展开，否则保持关闭
    if (!isExpanded) {
      box.classList.add('expanded');
    }
  });
});

效果说明 #

• 鼠标悬停Box时保持原有的1.05倍缩放效果；
• 点击任意Box，它会扩展至90%窗口宽度，自动适配内容高度并显示隐藏文本；
• 再次点击同一Box会收缩回原尺寸，点击其他Box时，当前展开的Box会自动收缩，新点击的Box展开。

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