本文详解如何通过原生 javascript 实现一个响应式、可拖拽调整宽度的侧边栏，重点解决因选择器错误导致的 resize 失效问题，并兼顾百分比初始宽度与像素动态调整的兼容性。
本文详解如何通过原生 javascript 实现一个响应式、可拖拽调整宽度的侧边栏，重点解决因选择器错误导致的 resize 失效问题，并兼顾百分比初始宽度与像素动态调整的兼容性。
在构建现代 Web 布局时，可伸缩侧边栏（Expandable Sidenav）是常见需求——它需支持初始响应式布局（如 Tailwind 的 w-1/5），又允许用户通过拖拽分隔线自由调整宽度。但实践中常因 DOM 选择器不匹配或样式覆盖逻辑不当而失效。
? 根本问题：选择器类型不匹配
您在 HTML 中为元素设置了 id="sidebar" 和 id="resizer"：
<div id="sidebar" class="bg-red-300 w-1/5 relative">1 <div id="resizer" class="w-3 ... absolute bg-gray-600 h-full"></div> </div>
但在 JavaScript 中却错误地使用了类选择器（.sidebar 和 .resizer）：
var resizer = document.querySelector(".resizer"), // ❌ 应为 "#resizer"
sidebar = document.querySelector(".sidebar"); // ❌ 应为 "#sidebar"
这导致 querySelector 返回 null，后续所有事件监听均无法绑定，resize 功能完全静默失败。这是最常见也最容易被忽略的硬性错误。
✅ 正确写法（使用 ID 选择器）：
const resizer = document.querySelector("#resizer");
const sidebar = document.querySelector("#sidebar");
function initResizer(resizer, sidebar) {
let x = 0;
let initialWidth = 0;
function handleMousedown(e) {
x = e.clientX;
// 获取当前计算宽度（支持 % / px / rem 等单位）
const computed = window.getComputedStyle(sidebar);
initialWidth = parseInt(computed.width, 10);
document.addEventListener("mousemove", handleMousemove);
document.addEventListener("mouseup", handleMouseup);
}
function handleMousemove(e) {
const dx = e.clientX - x;
const newWidth = Math.max(200, initialWidth + dx); // 设置最小宽度限制（如 200px）
sidebar.style.width = `${newWidth}px`; // ✅ 强制设置内联 width，覆盖 CSS 类定义
}
function handleMouseup() {
document.removeEventListener("mousemove", handleMousemove);
document.removeEventListener("mouseup", handleMouseup);
}
resizer.addEventListener("mousedown", handleMousedown);
}
initResizer(resizer, sidebar);
⚙️ 关键技术说明
- window.getComputedStyle() 是获取元素当前生效样式的唯一可靠方式（包括由 w-1/5 计算出的实际像素值），避免直接读取 element.style.width（该属性仅返回内联样式）。
- 设置 sidebar.style.width 会覆盖 Tailwind 的 w-1/5 类——这是预期行为。百分比宽度仅用于初始化；拖拽时需切换为精确像素控制以保证平滑性和可预测性。
- 务必添加最小/最大宽度约束（如 Math.max(200, ...)），防止侧边栏被拖至不可见或过度挤压主内容区。
- 事件监听器需正确移除，避免内存泄漏和多次拖拽叠加触发。
? 注意事项与优化建议
- ✅ 不要混合使用 flex 百分比 + width 内联样式：当父容器为 Flex 布局时，对子项设置 width 可能与 flex-basis 冲突。推荐统一用 flex 控制（见下文替代方案）。
- ✅ 增强用户体验：添加 user-select: none 到 #resizer 防止文字选中；鼠标进入时显示 cursor-col-resize。
- ✅ 响应式健壮性：若需在不同断点重置宽度，可在 resize 事件中重新初始化 initialWidth 或改用 flex-grow/flex-shrink + min-width 组合（更符合 Flex 布局哲学）。
? 进阶提示：若希望完全遵循 Flex 布局规范，可放弃 width 操作，改用动态修改 flex-basis：
sidebar.style.flexBasis = `${newWidth}px`;并确保 .sidebar 类中移除 w-1/5，改用 flex-[0_1_20%]（即 flex: 0 1 20%），这样 flex-basis 将作为初始基准，拖拽时仍可精准控制。
修复选择器后，您的侧边栏即可流畅拖拽伸缩——简洁、高效、无框架依赖。
