web - MDC-Web：多个简单菜单

Question

我使用 google MATERIAL COMPONENTS FOR THE WEB 并遇到“简单菜单”问题。检查我的 codepen：[每页有多个菜单？][1]

[1]: https://codepen.io/QJan84/pen/govRmg

第一个菜单有效，其他菜单无效。每页有多个菜单我该怎么做？

Answer 1

您正在使用document.querySelector菜单和切换，但它只会返回分别匹配“.mdc-simple-menu”和“.js--toggle-dropdown”的第一个节点元素。

相反，您应该使用document.querySelectorAll它将返回 NodeList，您需要将其转换为数组以使用其元素进行迭代。

我将您的示例菜单和切换器包装到容器中，以便使用Node.parentElement更轻松地选择切换器。

因此，最终结果可能如下所示：

const menuEls = Array.from(document.querySelectorAll('.mdc-simple-menu'));

menuEls.forEach((menuEl) => {
  // Initialize MDCSimpleMenu on each ".mdc-simple-menu"
  const menu = new mdc.menu.MDCSimpleMenu(menuEl);

  // We wrapped menu and toggle into containers for easier selecting the toggles
  const dropdownToggle = menuEl.parentElement.querySelector('.js--dropdown-toggle');
  dropdownToggle.addEventListener('click', () => {
    menu.open = !menu.open;
  });
});

您可以在 Codepen 上查看演示。