要实现无需javascript的侧边栏展开收起效果，可使用css的:target选择器或复选框结合label的方式。1. 使用:target选择器时，通过锚点变化触发样式控制侧边栏显示，点击链接打开侧边栏，url会变为#sidebar，再次点击空锚点关闭侧边栏；2. 使用复选框+label方式则通过隐藏的checkbox状态切换影响侧边栏位置，利用相邻兄弟选择器实现不改变url的交互；3. 无论哪种方法，均可通过添加transition属性实现平滑动画效果，提升用户体验。
有时候我们想在网页中实现一个简单的交互效果，比如点击按钮展开或收起侧边栏，但又不想引入JavaScript。其实，利用CSS的:target选择器或者结合复选框（checkbox）和label的方式，就可以实现这种不需要JS的交互效果。
下面介绍几种常见的纯CSS方法来控制侧边栏的展开与收起。
使用 :target 选择器控制侧边栏
:target 是一种非常实用的伪类选择器，它可以根据 URL 中的锚点来触发样式变化。我们可以利用这一点来切换侧边栏的状态。
立即学习“前端免费学习笔记（深入）”；
基本结构：
<a href="#sidebar">打开侧边栏</a> <a href="#">关闭侧边栏</a> <div id="sidebar" class="sidebar"> <!-- 侧边栏内容 --> </div>
CSS 样式示例：
.sidebar {
width: 250px;
position: fixed;
left: -250px; /* 初始隐藏 */
top: 0;
bottom: 0;
transition: left 0.3s ease;
}
.sidebar:target {
left: 0;
}说明：
- 点击“打开侧边栏”时，URL 会变成
#sidebar，这时:target触发，侧边栏滑出。 - 点击“关闭”链接时，跳转到空锚点
#，移除目标状态，侧边栏收回。
这种方式的优点是完全不依赖 JavaScript，适合静态页面使用。缺点是 URL 会有锚点变化，可能不适合所有场景。
使用复选框 + label 控制侧边栏
如果你希望不改变 URL，也可以通过 HTML 的 <input type="checkbox"> 和 <label> 来实现切换。
HTML 结构：
<input type="checkbox" id="sidebar-toggle" hidden> <label for="sidebar-toggle">切换侧边栏</label> <div class="sidebar"> <!-- 内容 --> </div>
CSS 示例：
.sidebar {
width: 250px;
position: fixed;
left: -250px;
top: 0;
bottom: 0;
transition: left 0.3s ease;
}
#sidebar-toggle:checked ~ .sidebar {
left: 0;
}说明：
- 通过
~相邻兄弟选择器，当 checkbox 被选中时，影响.sidebar的位置。 -
hidden属性可以隐藏 checkbox，只保留 label 操作。 - 这种方式不会修改 URL，适合需要静默切换的场景。
加入过渡动画让效果更自然
无论你用哪种方式，加上 CSS 动画可以让展开和收起的过程更平滑。
transition: left 0.3s ease;
这行代码加在 .sidebar 中，能让它的位置变化有一个缓动过程，而不是瞬间完成。
你还可以根据需要调整动画类型，比如：
ease-in-outlinear- 自定义贝塞尔曲线
cubic-bezier(0.4, 0, 0.2, 1)
过渡时间也可以适当调整，比如从 0.3s 改为 0.5s，看哪种更适合你的设计风格。
这些方法都不需要写一行 JavaScript，就能实现基础的交互功能。虽然它们不能替代复杂的前端框架逻辑，但在一些轻量级项目、文档页面或静态站点中非常实用。
基本上就这些。
