MDC-Web多Simple Menu问题：单页内仅首个菜单可用，求解决方法

嘿，我懂你遇到的这个糟心问题——页面里第一个Simple Menu好好的，后面的全点不动，这其实是用MDC-Web组件时很容易踩的小坑，核心原因是你只初始化了第一个匹配的菜单元素，剩下的菜单根本没被绑定实例！

问题根源 #

如果你的代码是这么写的：

const menu = mdc.menu.MDCSimpleMenu.attachTo(document.querySelector('.mdc-simple-menu'));

document.querySelector只会返回页面中第一个符合.mdc-simple-menu选择器的元素，后面的菜单完全没被初始化，自然没法响应交互。

正确解决方案：逐个初始化每个菜单实例 #

你需要遍历页面上所有的菜单元素，给每个菜单单独创建MDCSimpleMenu实例，同时绑定对应的触发按钮。具体步骤如下：

1. 让HTML结构里的菜单与触发按钮关联清晰
   可以用自定义属性绑定它们的对应关系，这样后续JS里更容易匹配：

   <!-- 菜单组1 -->
   <button class="mdc-button menu-trigger" data-target-menu="menu-1">打开菜单1</button>
   <div class="mdc-simple-menu" id="menu-1">
     <ul class="mdc-list" role="menu">
       <li class="mdc-list-item" role="menuitem">选项1</li>
       <li class="mdc-list-item" role="menuitem">选项2</li>
     </ul>
   </div>
   
   <!-- 菜单组2 -->
   <button class="mdc-button menu-trigger" data-target-menu="menu-2">打开菜单2</button>
   <div class="mdc-simple-menu" id="menu-2">
     <ul class="mdc-list" role="menu">
       <li class="mdc-list-item" role="menuitem">选项A</li>
       <li class="mdc-list-item" role="menuitem">选项B</li>
     </ul>
   </div>
   

2. 遍历并初始化每个菜单
   在JS里获取所有菜单元素，逐个创建实例并绑定触发按钮的点击事件：

   // 获取页面上所有的Simple Menu元素
   const allMenus = document.querySelectorAll('.mdc-simple-menu');
   
   allMenus.forEach(menuElement => {
     // 初始化当前菜单的MDCSimpleMenu实例
     const menuInstance = new mdc.menu.MDCSimpleMenu(menuElement);
     
     // 通过自定义属性找到对应的触发按钮
     const menuId = menuElement.id;
     const triggerBtn = document.querySelector(`[data-target-menu="${menuId}"]`);
     
     // 给触发按钮绑定点击事件，切换菜单显示状态
     triggerBtn.addEventListener('click', () => {
       menuInstance.open = !menuInstance.open;
     });
   });
   

额外提示 #

• 每个菜单必须拥有独立的MDCSimpleMenu实例，不能多个菜单共用同一个实例
• 如果你的DOM结构更复杂，也可以把按钮和菜单放在同一个父容器里，通过closest()方法找到父容器再获取对应元素
• 记得确保所有DOM元素加载完成后再执行初始化代码，可以把JS放在<body>末尾，或者用DOMContentLoaded事件包裹

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