MDC-Web：多个简单的菜单

Question

我使用 google MATERIAL 网络组件，但 "Simple Menu" 有问题。检查我的代码笔：[每页有多个菜单？][1]

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

第一个菜单有效，其他菜单无效。我需要做什么才能让每页有多个菜单？

Answer 1

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

相反，您应该使用 document.querySelectorAll that will return the NodeList, which you’ll need to convert to array to iterate with its elements。

我将您的示例菜单和开关包装到容器中，以便使用 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;
  });
});

你可以view the demo on Codepen.

MDC-Web：多个简单的菜单

MDC-Web: Multiple simple menu

web

material-components

material-components-web