js实现左侧
以下是使用JavaScript实现左侧布局的几种常见方法，适用于不同场景需求：
固定宽度左侧栏 + 右侧自适应
<div class="container">
<div class="left-sidebar">左侧固定宽度</div>
<div class="main-content">右侧自适应宽度</div>
</div>.container {
display: flex;
}
.left-sidebar {
width: 200px;
background: #f0f0f0;
}
.main-content {
flex: 1;
background: #fff;
}使用CSS Grid实现
.container {
display: grid;
grid-template-columns: 200px 1fr;
gap: 10px;
}动态调整左侧宽度
通过JavaScript动态修改左侧栏宽度：
const sidebar = document.querySelector('.left-sidebar');
function adjustSidebar(width) {
sidebar.style.width = `${width}px`;
}
// 调用示例
adjustSidebar(250);可折叠侧边栏
添加折叠功能：
const sidebar = document.querySelector('.left-sidebar');
const toggleBtn = document.getElementById('toggle-btn');
toggleBtn.addEventListener('click', () => {
sidebar.classList.toggle('collapsed');
sidebar.style.width = sidebar.classList.contains('collapsed') ? '50px' : '200px';
});响应式处理
通过媒体查询实现移动端适配：
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.left-sidebar {
width: 100%;
}
}注意事项：
- 现代浏览器推荐使用Flexbox或Grid布局
- 需要处理内容溢出的滚动条问题
- 考虑添加过渡动画提升用户体验
- 对于复杂应用，可结合框架如React/Vue的组件化实现
以上方案可根据具体项目需求组合使用，核心是通过CSS确定布局结构，JavaScript实现交互逻辑。
