HTML/CSS可折叠盒子实现问题：点击展开效果异常求助

问题概述 #

已有一个蓝色盒子组件，想要实现点击盒子时平滑向下展开，隐藏文本显示在主标题下方的折叠效果，但尝试的代码未达预期：隐藏文本位置错误，无法跟随盒子展开显示在标题下方。

问题原因 #

1. DOM结构错误：隐藏文本.hidden-text未嵌套在.rectangle内部，导致无法继承盒子的相对定位上下文，位置不受控。
2. CSS选择器错误：.expanded .rectangle选择器逻辑错误，.expanded类是直接添加在.rectangle元素上的，应使用.rectangle.expanded。
3. 定位与布局冲突：.hidden-text的绝对定位未基于.rectangle的扩展空间，导致显示位置错误。

修正后的完整代码 #

HTML部分 #

<head>
  <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">
</head>

<body>
  <div class="tile-container">
    <!-- 将hidden-text嵌套在rectangle内部 -->
    <a class="rectangle" href="javascript:void(0);">
      <div class="plus radius"></div>
      <div class="tile-label">
        Sample <span class="tile-accent">Text</span>
      </div>
      <div class="hidden-text">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </div>
    </a>
  </div>
</body>

CSS部分 #

.tile-container {
  display: flex;
}

.rectangle {
  background-color: #0051a5;
  margin: 5px;
  display: block;
  cursor: pointer;
  height: 100px; /* 初始高度，仅显示标题和加号 */
  flex: 1;
  border-radius: 23px;
  position: relative;
  overflow: hidden; /* 防止隐藏文本溢出 */
  transition: height 0.3s ease; /* 平滑高度过渡 */
}

/* 展开状态的盒子高度 */
.rectangle.expanded {
  height: 250px; /* 调整为能容纳标题和隐藏文本的高度 */
}

.plus {
  display: inline-block;
  background: linear-gradient(#0051a5 0 0), linear-gradient(#0051a5 0 0), #fff;
  background-position: center;
  background-size: 60% 2.5px, 2.5px 60%;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

.radius {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  position: absolute;
  right: 25px;
  top: 25px;
}

.tile-label {
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  position: absolute;
  bottom: 25px;
  left: 25px;
}

.tile-accent {
  color: #FFC72C;
}

.hidden-text {
  display: none;
  font-family: 'PT Sans Narrow', sans-serif;
  font-size: 18px;
  color: #000;
  padding: 10px 25px;
  position: absolute;
  top: 100px; /* 与初始盒子高度一致，刚好在标题下方 */
  left: 0;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box; /* 确保padding不影响宽度 */
}

/* 展开时显示隐藏文本 */
.rectangle.expanded .hidden-text {
  display: block;
}

JavaScript部分 #

document.querySelector('.rectangle').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止a标签默认跳转行为
  this.classList.toggle('expanded');
  const plus = this.querySelector('.plus');
  plus.style.transform = this.classList.contains('expanded') ? 'rotate(45deg)' : 'rotate(0)';
});

关键修改点 #

• 将.hidden-text嵌套到.rectangle内部，利用.rectangle的position: relative作为定位上下文。
• 修正CSS选择器，将.expanded .rectangle改为.rectangle.expanded，正确匹配展开状态的盒子。
• 给.rectangle添加overflow: hidden，避免隐藏文本在未展开时溢出。
• 设置.hidden-text的top值等于盒子初始高度，确保显示在标题正下方。
• 阻止a标签的默认跳转行为，避免点击后页面跳转。

内容的提问来源于stack exchange，提问作者s.ha11