答案：通过css控制侧边栏宽度和文字显隐，配合transition实现平滑动画，利用:hover或JavaScript切换类名完成展开与折叠效果，确保内容同步变化，提升交互体验。
实现侧边栏折叠效果，核心是通过CSS控制宽度或位移的变化，配合过渡动画让展开和收起更自然。下面介绍一种简洁实用的方法，使用纯CSS实现侧边栏的hover或点击展开/折叠效果。
1. 基础结构与布局
先搭建html结构，包含一个侧边栏和主内容区域：
<div class="sidebar"> <div class="menu-item">首页</div> <div class="menu-item">设置</div> <div class="menu-item">帮助</div> </div> <div class="main-content"> <h2>主内容区</h2> </div>
2. 默认折叠状态样式
设定侧边栏初始为窄宽度（如60px），只显示图标或首字，文字隐藏：
.sidebar { width: 60px; background: #333; color: white; transition: width 0.3s ease; overflow: hidden; position: fixed; height: 100%; } .menu-item { padding: 15px 10px; text-align: center; font-size: 14px; white-space: nowrap; } /* 文字默认隐藏 */ .menu-item span { display: none; }
3. 鼠标悬停展开效果
当鼠标移到侧边栏时，宽度变为200px，显示文字：
立即学习“前端免费学习笔记（深入）”；
.sidebar:hover { width: 200px; } .sidebar:hover .menu-item span { display: inline; } .sidebar:hover .menu-item { text-align: left; padding-left: 20px; }
4. 可选：点击切换展开/折叠
如果想用JavaScript控制点击切换，可以添加一个开关按钮，并用类名控制状态：
/* 添加展开类后的样式 */ .sidebar.expanded { width: 200px; } .sidebar.expanded .menu-item span { display: inline; } .sidebar.expanded .menu-item { text-align: left; padding-left: 20px; }
JS部分（轻量）：
document.querySelector('.sidebar').addEventListener('click', function() { this.classlist.toggle('expanded'); });
基本上就这些。通过CSS的transition实现平滑动画，结合:hover或JS控制类名，就能做出实用的侧边栏折叠效果。关键是文字的显隐与容器宽度变化同步，视觉体验更流畅。
暂无评论