子菜单显示异常：时好时坏且锁定，点击外部无法关闭

我目前遇到两个子菜单相关问题：

• 子菜单显示状态不稳定，有时能正常显示，有时无法显示
• 点击子菜单外部无法关闭菜单，尽管代码逻辑设计了该功能

现有代码 #

JavaScript #

let submenu = document.querySelector('.sub-menu')
let submenuHead = document.querySelector('.submenuheader')

openSubmenu = () => {
  if (submenu.style.display === "none") {
    submenu.style.display = "block";
  } else {
    submenu.style.display = "none"
  }
};

submenuHead.addEventListener('click', openSubmenu);
submenu.addEventListener('click', (Event) => {
  Event.stopPropagation();
  window.addEventListener('click', () => {
    if (EventTarget != submenu && submenu.style.display === "block") {
      submenu.style.display = "none";
    }
  });
});

CSS #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', 'Sans-serif';
}

body {
  min-height: 100vh;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: #333;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 99;
}

nav .navbar {
  height: 100%;
  max-width: 1250px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  padding: 0 50px;
}

.navbar .logo a {
  font-size: 20px;
  text-decoration: none;
  font-weight: 600;
  color: #ffffff;
}

nav .navbar .nav-links {
  line-height: 70px;
  height: 100%;
}

nav .navbar .links {
  display: flex;
}

nav .navbar .links li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0 14px;
}

nav .navbar .links li:hover {
  background-color: #777;
}

nav .navbar .links li a {
  color: #ffffff;
  height: 100%;
  text-decoration: none;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
}

.navbar .links .submenuheader .sub-menu {
  position: absolute;
  top: 70px;
  left: 0;
  line-height: 40px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 4px 4px;
  display: none;
  z-index: 2;
  background: #333;
}

HTML #

<!DOCTYPE html>

<head>
  <title>Webpage</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <html lang="en" dir="ltr" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <nav>
    <div class="navbar">
      <div class="logo"><a href="#">Webpage</a></div>
      <ul class="links">
        <li>
          <a href="#">Home</a>
        </li>
        <li class="submenuheader">
          <a href="#">submenuheader</a>
          <ul class="sub-menu">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</body>

已尝试的解决方案 #

• 将window的事件监听替换为document.body
• 通过给submenu添加.show CSS类控制显示，使用代码：

  submenuHeader.onclick = () => { submenu.classList.toggle('show') }
  

但点击外部关闭的功能表现依然很差。

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