从正文关闭后，菜单需要单击两次才能打开

Question

如果我打开菜单，然后通过单击正文上的任意位置将其关闭，则必须单击两次才能再次打开它。我做错了什么？下面是我的代码。

 closeDropdownMenu() {
   if (document.querySelector('.mdc-simple-menu--open')) {
    document.querySelector('.mdc-simple-menu').classList.remove('mdc-simple-menu--open');
   }
 }
initializeDropDownMenu() {
  const mdmMenuEl = document.querySelector('.js-dropdown-menu');
  if (!mdmMenuEl) return;
  const mdcMenu = new MDCSimpleMenu(mdmMenuEl);
  const menuToggleEL = document.querySelector('.js-dropdown-toggle');
  menuToggleEL.addEventListener('click', () => { 
    mdcMenu.open = !mdcMenu.open;
  });
  document.querySelector('body').addEventListener('click', () =>
    this.closeDropdownMenu()
  );
}

Answer 1

我猜这是因为当您关闭菜单时，您没有将mdcMenu.open设置为false，因此下一次单击仍然会认为mdcMenu.open === true，这会将其设置为false(并且没有打开菜单(。但随后再单击一次，将false设置为 true，然后菜单打开。

将body.click代码更改为：

document.querySelector('body').addEventListener('click', () => {
  mdcMenu.open = false;
  this.closeDropdownMenu();
});