实现可折叠个人资料页面：将头像固定至AppBar

给你一套实用的纯CSS+JS实现方案，直接就能复用：

核心逻辑 #

靠CSS的transition属性做平滑过渡动画，配合JS切换类名来控制容器的展开/收起状态。

代码实现 #

HTML结构 #

<div class="toggle-box">
  <button class="toggle-btn">切换状态</button>
  <div class="content-wrap">
    <div class="inner-content">
      <!-- 这里替换成你要展开收起的内容 -->
      <p>示例文本1</p>
      <p>示例文本2</p>
      <p>示例文本3</p>
    </div>
  </div>
</div>

CSS样式 #

.toggle-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* 默认收起状态 */
.content-wrap {
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
  border: 1px solid #ddd;
  padding: 0;
}

/* 展开状态的类 */
.content-wrap.expanded {
  width: 220px; /* 展开后的宽度可按需调整 */
  padding: 10px;
}

/* 内容延迟显示，避免过渡时挤在一起 */
.inner-content {
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
}

.content-wrap.expanded .inner-content {
  opacity: 1;
}

.toggle-btn {
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  background: #f5f5f5;
}

JS控制逻辑 #

const toggleBtn = document.querySelector('.toggle-btn');
const contentWrap = document.querySelector('.content-wrap');

toggleBtn.addEventListener('click', () => {
  contentWrap.classList.toggle('expanded');
});

细节调整提示 #

• 如果需要高度方向的展开收起，把CSS里的width换成height即可
• 想要更丝滑的视觉效果，可以给容器加box-shadow的过渡
• 要是内容较多，可把固定宽度改成max-width，让容器自适应内容宽度

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