为什么我的子菜单显示一次，然后锁定？当我在子菜单外单击时它也不会关闭

问题描述 投票：0回答：1

我一直在努力解决这个问题。问题是我的子菜单有时会显示，有时不会，所以我不知道什么有效，什么无效。当我点击子菜单时它也不会关闭，但代码详细说明它应该关闭。这里发生了什么？ http://jsfiddle.net/jxtzyLk3/1/

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";
    }
  });
});
@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;
}
<!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>

我尝试将 JS 

EventListener
的 
window
切换为 
document.body
。我还尝试在 
.show
上放置一个 CSS 类 
.submenu
来显示子菜单（当我点击它时切换菜单以关闭它根本不起作用。）使用这个 JS：

submenuHeader.onclick = () => { submenu.classList.toggle('show') }
javascript html css navbar submenu
1个回答
0
投票

您可以添加一个新类并切换该类，而不是使用样式属性手动显示和隐藏 div。

您的外部点击也不起作用，因为它在子菜单点击处理程序事件中。

请检查以下工作代码。

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

openSubmenu = () => {
  submenu.classList.toggle('hidden');
};

submenuHead.addEventListener('click', openSubmenu);

window.addEventListener('click', (Event) => {
  if (!submenuHead.contains(Event.target)) {
    submenu.classList.add('hidden');
  }
});
@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;
  z-index: 2;
  background: #333;
}

.hidden {
  display: none;
}
<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 hidden">
            <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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.