AdminLTE 3.0点击子菜单时如何折叠nav-treeview菜单？

实现方案 #

你当前用的是AdminLTE框架的侧边导航树组件，默认逻辑仅支持点击父级菜单触发折叠，且点击页面非侧边栏区域会自动收起菜单，按以下步骤修改即可满足需求： #

1. 引入JavaScript逻辑（依赖AdminLTE默认自带的jQuery）

将以下代码放在页面</body>标签前，且确保在AdminLTE的app.js引入之后加载：

$(function () {
  // 阻止点击侧边栏区域触发全局菜单关闭事件，实现点击页面其他区域不自动关闭菜单
  $('.main-sidebar').on('click', function (e) {
    e.stopPropagation()
  })

  // 绑定子菜单点击事件，触发对应父级菜单折叠
  $('.nav-treeview .nav-link').on('click', function () {
    // 找到当前子菜单对应的父级触发元素
    const parentToggle = $(this).closest('.nav-treeview').prev('.nav-link')
    // 触发父级的折叠切换逻辑
    parentToggle.trigger('click')
  })
})

2. 可选配置补充

如果你使用的是AdminLTE 3.x及以上版本，也可以在侧边栏初始化时添加配置关闭外部点击关闭功能，替代上面的事件阻止逻辑：

$('.sidebar').Sidebar({
  closeOnClickOutside: false
})

注意事项

• 你的原有PHP代码中通过$page判断添加show类的逻辑已经可以实现页面跳转后保持对应菜单展开状态，无需修改
• 如果不需要点击子菜单跳转仅需要折叠，可在子菜单点击事件中添加e.preventDefault()阻止默认跳转行为

内容的提问来源于stack exchange，提问作者Rose Ann