AdminLTE折叠按钮修改：将垂直隐藏改为水平左向隐藏（CodeIgniter）

阿华AIGC实验室

2026-5-6

解决AdminLTE折叠按钮水平向左隐藏的问题

嘿，我来帮你搞定这个需求！默认的AdminLTE data-widget="collapse" 是针对垂直方向的收缩（比如上下折叠内容），要改成水平向左隐藏的侧边栏效果，我们需要自定义按钮行为并调整CSS过渡，下面是具体实现步骤：

步骤1：修改按钮HTML，移除默认折叠组件

先把原按钮里的data-widget="collapse"去掉，换成自定义的ID，方便我们绑定事件：

<button type="button" class="btn btn-primary btn-sm pull-right" id="horizontal-collapse-btn" data-toggle="tooltip" title="Collapse" style="margin-right: 5px;">
  <i class="fa fa-minus"></i>
</button>

步骤2：添加CSS实现平滑水平过渡

假设你要折叠的是AdminLTE默认的左侧侧边栏（类名.main-sidebar），添加以下CSS来设置水平收缩的动画效果：

/* 给侧边栏添加过渡动画，确保移动平滑 */
.main-sidebar {
  transition: transform 0.3s ease-in-out;
  position: fixed;
  z-index: 1030; /* 和AdminLTE原有层级保持一致 */
}

/* 折叠状态：侧边栏向左完全移出视野 */
.main-sidebar.horizontal-collapsed {
  transform: translateX(-100%);
}

/* 让主内容区自动适配侧边栏折叠后的空间 */
.content-wrapper {
  transition: margin-left 0.3s ease-in-out;
}

.content-wrapper.sidebar-expanded {
  margin-left: 0;
}

步骤3：编写JS控制折叠逻辑和图标切换

在页面的脚本区域（或者单独的JS文件）添加这段代码，用来监听按钮点击，切换折叠状态并更新按钮图标：

$(document).ready(function() {
  // 初始化tooltip功能
  $('#horizontal-collapse-btn').tooltip();

  // 绑定按钮点击事件
  $('#horizontal-collapse-btn').on('click', function() {
    const $sidebar = $('.main-sidebar');
    const $content = $('.content-wrapper');
    const $icon = $(this).find('i');

    // 切换侧边栏和内容区的状态类
    $sidebar.toggleClass('horizontal-collapsed');
    $content.toggleClass('sidebar-expanded');

    // 切换按钮图标和tooltip标题
    if ($icon.hasClass('fa-minus')) {
      $icon.removeClass('fa-minus').addClass('fa-plus');
      $(this).attr('title', 'Expand');
    } else {
      $icon.removeClass('fa-plus').addClass('fa-minus');
      $(this).attr('title', 'Collapse');
    }

    // 重新初始化tooltip以更新标题
    $(this).tooltip('dispose').tooltip();
  });
});