如何实现Materialize CSS移动端导航栏点击菜单项后自动关闭

你使用的Materialize CSS的移动端导航（Sidenav组件）本身提供了手动关闭的实例方法，只需要给侧边栏内的所有菜单项绑定点击事件，触发关闭方法即可，具体实现代码如下：

• 方案1：初始化时存储Sidenav实例，点击时直接调用关闭方法

// 页面加载完成后初始化Sidenav，同时存储实例
document.addEventListener('DOMContentLoaded', function() {
  const sidenavElement = document.querySelector('.sidenav');
  // 将实例存储到变量中备用
  const sidenavInstance = M.Sidenav.init(sidenavElement);

  // 给所有侧边栏菜单项绑定点击事件
  const menuItems = document.querySelectorAll('.sidenav a');
  menuItems.forEach(item => {
    item.addEventListener('click', function() {
      sidenavInstance.close();
    });
  });
});

• 方案2：无需提前存储实例，点击时动态获取实例再关闭

// 统一给所有侧边栏菜单项绑定点击事件
document.querySelectorAll('.sidenav a').forEach(item => {
  item.addEventListener('click', function() {
    const sidenavElement = document.querySelector('.sidenav');
    // 动态获取已经初始化的Sidenav实例
    const sidenavInstance = M.Sidenav.getInstance(sidenavElement);
    sidenavInstance.close();
  });
});

补充说明：如果你的菜单项存在特殊的点击拦截逻辑，请确保该关闭事件不会被其他逻辑阻止，优先触发即可解决点击菜单项不自动关闭的问题。

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