升级mmenu至9.1/9.3版本后，在TYPO3项目中无法正常工作

1. 处理克隆菜单的全局显示问题 #

mmenu v9开始默认会克隆原菜单（生成带mm-clone-前缀的ID），这是和v8的核心差异之一。你需要通过CSS控制原菜单与克隆菜单的显示逻辑：

/* 默认隐藏原菜单，大屏下显示顶部导航 */
#my-menu {
    display: none;
}
@media (min-width: 980px) {
    #my-menu {
        display: block;
    }
    /* 大屏下隐藏克隆菜单和汉堡触发按钮 */
    .mm-clone-my-menu,
    .mm-menu-toggle {
        display: none !important;
    }
}
@media (max-width: 979px) {
    /* 小屏显示汉堡按钮，克隆菜单由mmenu控制显示/隐藏 */
    .mm-menu-toggle {
        display: block;
    }
}

替换#my-menu为你项目中原菜单的实际ID，确保克隆菜单的类/ID选择器与页面中实际生成的元素匹配。

2. 修复点击失效与左侧菜单布局问题 #

mmenu v9的初始化参数和事件绑定逻辑有调整，检查并修改你的初始化代码：

document.addEventListener('DOMContentLoaded', function() {
    new Mmenu('#my-menu', {
        offCanvas: {
            position: 'left',
            width: 280, // 自定义菜单宽度，解决占半屏的问题
        },
        navbar: {
            title: '导航' // 可选，设置菜单标题
        }
    }, {
        offCanvas: {
            page: {
                selector: '#page' // 指定页面主容器，确保菜单弹出时页面正确偏移
            }
        }
    });
});

• 如果不需要克隆菜单，可以在配置中添加clone: false，但需确保原菜单的HTML结构符合mmenu v9的要求
• 点击失效通常是因为没有正确指定页面容器selector，导致mmenu的事件监听未正确挂载到页面元素上

3. TYPO3模板与资源检查 #

• 确认TYPO3生成的菜单HTML结构无重复ID、类名冲突
• 检查mmenu v9的CSS/JS资源是否正确加载：v9可能新增了样式文件，需确保模板中引入了完整的mmenu.css和mmenu.js
• 清除TYPO3后台缓存和浏览器缓存，避免旧版本资源残留

4. 快速调试方法 #

• 打开浏览器控制台，查看元素的事件绑定情况，确认mmenu的点击事件是否已挂载到汉堡按钮和菜单元素上
• 临时禁用TYPO3中的其他前端插件（如jQuery扩展、其他导航组件），排查是否存在脚本冲突

内容的提问来源于stack exchange，提问作者Murat Yasar