AdminLTE3+Bootstrap4 动态AJAX加载侧边栏菜单treeview展开/隐藏失效问题

算力阿峰

2026-9-25

根因

AdminLTE内置的Treeview菜单交互事件，仅会在页面初次加载完成时，对当时已存在的DOM元素完成绑定。你通过AJAX异步插入的侧边栏菜单属于后续新增的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();
  });
});