后台 Sidebar 伸缩交互（PC + 移动端）实现

做前端开发的时候，经常会遇到这样的需求：页面左侧有个导航栏，但用户希望能把它收起来，腾出更多空间给主要内容。这个功能看起来简单，实际做起来还是有不少细节要处理的。今天就来聊聊怎么实现一个既好用又好看的导航栏收缩功能。

1. 基础HTML结构

首先得在导航栏头部加个切换按钮。这个按钮就是用户点击收缩导航栏的入口：

html 复制代码

<div class="text-center" id="menu-head">
    <h4>...</h4>
    <button id="toggleSidebar" class="btn btn-link text-white">
        <i class="fa fa-bars"></i>
    </button>
</div>

这里用了Font Awesome的汉堡包图标，看起来比较直观。按钮样式用btn-link让它融入到导航栏的设计中，不会显得突兀。

2. CSS样式控制

2.1 基础过渡动画

css 复制代码

#left-content {
    transition: all 0.3s ease;
}

这行代码很关键，它让导航栏的宽度变化有个平滑的过渡效果，而不是生硬地跳变。

2.2 收缩状态样式

当导航栏收起来的时候，我们要做几件事：

css 复制代码

#left-content.collapsed {
    flex: 0 0 60px !important;
    max-width: 60px !important;
}

#left-content.collapsed .nav-label,
#left-content.collapsed .down,
#left-content.collapsed .badge,
#left-content.collapsed .user-info {
    display: none !important;
}

宽度设置成60px刚好够放图标，所有的文字标签、箭头、徽章这些都隐藏掉。这样收起来的导航栏就只剩下图标，简洁明了。

右侧的内容区域也要相应调整：

css 复制代码

#left-content.collapsed + #right-content {
    flex: 0 0 calc(100% - 60px) !important;
    max-width: calc(100% - 60px) !important;
}

2.3 移动端适配

手机上的处理方式有点不一样。因为屏幕小，我们直接让导航栏从左边滑出来：

css 复制代码

@media (max-width: 768px) {
    #left-content {
        position: fixed;
        z-index: 1000;
        left: 0;
        transform: translateX(-100%);
    }
    
    #left-content.show {
        transform: translateX(0);
    }
    
    #right-content {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

移动端默认把导航栏藏在屏幕左边，需要的时候滑出来。右侧内容区域直接占满整个屏幕。

3. JavaScript交互逻辑

3.1 基础切换功能

javascript 复制代码

$(document).ready(function() {
    $('#toggleSidebar').on('click', function() {
        $('#left-content').toggleClass('collapsed');
        
        if ($(window).width() <= 768) {
            $('#left-content').toggleClass('show');
        }
    });
});

点击按钮的时候，PC端切换collapsed类，移动端切换show类。逻辑很简单，但要区分不同设备。

3.2 响应式处理

窗口大小变化的时候，要重置一下状态：

javascript 复制代码

$(window).on('resize', function() {
    if ($(window).width() <= 768) {
        $('#left-content').removeClass('collapsed').removeClass('show');
    }
});

这样避免用户在PC和手机之间切换时出现样式混乱。

3.3 移动端体验优化

手机上还有个小细节，用户点击菜单项后，导航栏应该自动收起来：

javascript 复制代码

if ($(window).width() <= 768) {
    $('.menuItem').on('click', function() {
        $('#left-content').removeClass('show');
    });
}

这个体验很重要，不然用户每次点完菜单还得手动关闭导航栏。

4. 动画细节优化

4.1 按钮旋转效果

css 复制代码

#toggleSidebar {
    transition: transform 0.3s ease;
}

#left-content.collapsed #toggleSidebar {
    transform: rotate(180deg);
}

按钮在收缩状态下旋转180度，给用户一个视觉反馈，让交互更有趣。

4.2 整体动画协调

所有的动画时间都设置成0.3秒，保持一致性。太快了用户感觉不到，太慢了又显得拖沓。

5. 实际使用场景

这套方案在实际项目中表现不错：

PC端使用：用户可以根据需要收缩导航栏，专注于主要内容。特别是在做数据分析或者编辑长文档的时候，多出来的空间很有用。

移动端使用：导航栏不会占用宝贵的屏幕空间，用户需要的时候一滑就出来了。

开发维护：代码结构清晰，后续要调整样式或者添加功能都比较方便。

6. 注意事项

有几个地方需要特别注意：

!important的使用要谨慎，这里用是因为要覆盖一些框架的默认样式
移动端的z-index要设置得足够高，确保导航栏能显示在其他元素上面
过渡动画的性能在低端设备上可能有影响，必要时可以用will-change属性优化

这套实现方案兼容性好，在主流浏览器上都能正常工作。如果你的项目有特殊需求，可以在这个基础上进行调整。