点击子菜单项时如何以编程方式关闭mmenu？

你的问题核心是：调用api.close()只隐藏了菜单本身，但没处理菜单的背景遮罩层。通常这类菜单的背景是一个独立的遮罩元素（比如带menu-backdrop/overlay类的div），或者由菜单容器的样式状态控制。

给你两个直接的解决思路：

1. 手动控制遮罩层的显示状态 #

先通过浏览器开发者工具定位背景遮罩对应的DOM元素（比如类名为menu-overlay），然后在点击事件里，调用api.close()之后手动隐藏它：

item.addEventListener("click", (event) => {
  event.preventDefault(); // 阻止锚链接默认跳转行为，避免和自定义滚动冲突
  scroll({
    top: document.querySelector(hash).offsetTop - document.getElementById('header_bottom').clientHeight,
    behavior: "smooth"
  });
  api.close();
  // 新增：隐藏背景遮罩
  const backdrop = document.querySelector('.menu-overlay');
  if (backdrop) {
    // 根据遮罩的控制方式选其一
    backdrop.classList.remove('active'); // 如果是通过active类控制显示
    // 或者 backdrop.style.display = 'none';
  }
});

2. 完善api.close()的逻辑 #

如果你的菜单用了自定义或第三方API，可能api.close()本身就没包含隐藏遮罩的逻辑。可以查看这个API的源码，在内部补充遮罩层的隐藏代码，这样所有调用api.close()的场景都会自动处理背景。

内容的提问来源于stack exchange，提问作者Stephan B.