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

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();
});