AdminLTE 3搭配Bootstrap4使用AJAX加载侧边栏菜单后展开折叠失效问题

AI 小北

2026-9-25

问题根因

AdminLTE 3 的侧边栏展开折叠功能由内置的 Treeview 插件提供，插件只会在页面首次初始化时扫描当前DOM中带data-widget="treeview"属性的元素并绑定交互事件。你通过AJAX动态插入的菜单属于后续新增的DOM，不会被插件自动识别绑定事件，因此功能失效。静态写入的菜单能正常运行，就是因为静态DOM在页面初始化阶段就已经被插件扫描完成了事件绑定。

解决方案

在AJAX请求完成、菜单DOM插入页面后，手动触发 Treeview 插件的初始化即可。

修改后的JS代码如下：

$(document).ready(function(){
  var url = "";
    $.ajax({
    url: url,
  }).done(function(resp){
    // 拉取数据构造菜单DOM
    var ret = '<nav class="mt-2"><ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true"><li class="nav-item"><a href="#" class="nav-link"><i class="nav-icon fas fas fa-user"></i><p>Admin<i class="right fas fa-angle-left"></i></p></a><ul class="nav nav-treeview"><li class="nav-item"><a href="#add-order.php" class="nav-link"><i class="far fa-circle nav-icon"></i><p>Rahim</p></a></li></ul><ul class="nav nav-treeview"><li class="nav-item"><a href="#" class="nav-link"><i class="far fa-circle nav-icon"></i><p>Test</p></a></li></ul></li></ul></nav>';
    $('.sidebar').html(ret);
    // 手动初始化Treeview插件
    $('[data-widget="treeview"]').Treeview('init');
  });
});