Laravel-admin二级菜单展开收缩点击失效JS修复代码-php教程-PHP中文网

laravel-admin 二级菜单无法展开的根本原因是事件绑定失效、dom 渲染时机不当或 js 重复执行；需确保 dom 就绪后初始化 $.adminlte.treeview()，手动绑定 toggle 事件，并在 pjax 切换后重建菜单行为。

laravel-admin二级菜单展开收缩点击失效js修复代码

这个问题通常出现在 Laravel-admin 的侧边栏二级菜单点击后无法正常展开或收起，根本原因多是事件绑定失效、DOM 渲染时机不对，或 JS 被重复执行导致监听器丢失。修复关键在于确保菜单折叠逻辑在 DOM 就绪后正确初始化，并补全缺失的 toggle 事件绑定。

检查并重置 sidebar-menu 的初始化逻辑

Laravel-admin 默认使用 $.AdminLTE.treeview() 初始化菜单，但若页面动态加载（如通过 pjax 或 Vue 组件嵌入），该方法可能未被重新调用，导致二级菜单无响应。

在页面底部或自定义 JS 中手动触发一次初始化：

$(function() {
    if (typeof $.AdminLTE !== 'undefined' && $.AdminLTE.treeview) {
        $.AdminLTE.treeview('.sidebar');
    }
});

手动绑定 toggle 点击事件（兼容性兜底）

当 AdminLTE 版本较旧或被定制修改后，原生的 .treeview-menu 展开逻辑可能失效。可直接监听父级菜单项的点击，控制子菜单显隐：

Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式，用于飞书日历导入导出及数据集成。

下载

为所有带子菜单的 <a></a> 标签添加 data-toggle 属性（Laravel-admin 默认已有）
补充 JS 逻辑，避免重复绑定：

$(document).on('click', '.sidebar-menu > li.has-treeview > a', function(e) {
    e.preventDefault();
    const $this = $(this);
    const $next = $this.next('.treeview-menu');
    
    // 收起其他同级菜单（可选）
    $this.closest('ul').find('.treeview-menu').not($next).slideUp(200);
    
    // 切换当前菜单
    $next.slideToggle(200, function() {
        $this.find('i.fa-angle-left, i.fa-angle-down').toggleClass('fa-angle-left fa-angle-down');
    });
});

修复 pjax 场景下的菜单状态丢失

使用 pjax 切换页面时，sidebar DOM 未重载，但 JS 上下文已重置，导致事件监听失效：

监听 pjax:success 事件，在每次页面局部刷新后重建菜单行为：

$(document).on('pjax:success', function() {
    // 重新初始化 treeview
    if (typeof $.AdminLTE !== 'undefined') {
        $.AdminLTE.treeview('.sidebar');
    }
    // 或执行上面的手动 toggle 绑定（推荐二者选一）
});