如何在点击内部锚点链接时关闭Mmenu light菜单？

当然可以实现，Mmenu Light本身没有内置点击内部锚点自动关闭菜单的功能，但通过手动添加事件监听，完全能复刻mmenu.js的同款效果。

实现步骤： #

1. 先完成Mmenu Light的基础初始化
2. 定位菜单内的所有内部锚点链接（即href属性以#开头的链接）
3. 给这些链接绑定点击事件，触发菜单的关闭方法

基础实现代码： #

// 初始化Mmenu Light
const menu = new MmenuLight(document.querySelector('#menu'), 'all');
const navigator = menu.navigation();
const drawer = menu.offcanvas();

// 获取菜单内所有内部锚点链接
const internalAnchors = document.querySelectorAll('#menu a[href^="#"]');

// 为每个锚点绑定关闭菜单的点击事件
internalAnchors.forEach(anchor => {
  anchor.addEventListener('click', () => {
    // 调用Mmenu Light的关闭方法
    drawer.close();
  });
});

动态生成链接的处理方案： #

如果菜单里的锚点链接是动态加载的（比如通过AJAX渲染），上面的静态选择器可能无法捕获新生成的元素，这时可以用事件委托来处理：

// 初始化Mmenu Light（同上）
const menu = new MmenuLight(document.querySelector('#menu'), 'all');
const navigator = menu.navigation();
const drawer = menu.offcanvas();

// 给菜单容器绑定事件委托
document.querySelector('#menu').addEventListener('click', (e) => {
  // 找到被点击的内部锚点元素
  const targetAnchor = e.target.closest('a[href^="#"]');
  if (targetAnchor) {
    // 关闭菜单
    drawer.close();
  }
});

原理说明： #

Mmenu Light的API提供了drawer.close()方法，专门用于关闭侧边栏菜单。我们只需要在用户点击内部锚点时调用这个方法，就能实现和mmenu.js一致的自动关闭效果——本质上和mmenu.js内置的逻辑是一样的，只是Mmenu Light没有将这个功能设为默认项，需要手动添加监听。

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