Javascript eventListener 仅在元素的某些区域工作答案

【问题标题】：Javascript eventListener only working in some areas of the elementJavascript eventListener 仅在元素的某些区域工作
【发布时间】：2021-09-20 02:49:55
【问题描述】：

所以我正在构建一个汉堡菜单响应式导航栏。我完成了大部分工作，但我被卡在了某个地方。问题是我已经在 div .burger 上应用了 javascript onClick 事件侦听器，以便将 .nav-container 的不透明度更改为 1。到目前为止，这一切正常。问题是这个点击事件只适用于.burger 的某些区域。就像单击其中的行或右侧的某处一样。我似乎找不到问题所在。有人可以帮我弄这个吗？提前致谢。

这是我的代码

function showNav() {
  var nav = document.getElementById("nav");

  nav.classList.add("show-nav");
}

* {
  margin: 0px;
  padding: 0;
  box-sizing: border;
}

.container {
  display: flex;
  margin-top: 2%;
}

header {
  position: relative;
  z-index: 1;
}

.line1,
.line2,
.line3 {
  width: 40px;
  height: 8px;
  background-color: black;
  margin-top: 3px;
}

.nav-heading {
  flex: 4;
  margin-left: 5%;
}

.burger {
  flex: 1;
  margin-left: 40%;
  background-color: red;
  padding: 0;
  width: auto;
}

.nav-container {
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: .2s ease-in-out;
  transform: translateY(-20%);
  transform-origin: left;
  ul {
    display: flex;
    flex-direction: column;
    background-color: blue;
    width: 100%;
    align-items: center;
    list-style-type: none;
    li {
      flex: 1;
      padding: 15px;
    }
  }
}

.show-nav {
  opacity: 1;
  transform: translateY(20%);
}

<header>
  <div class="container">
    <div class="nav-heading">
      <h1>Navbar</h1>
    </div>

    <div class="burger" onclick="showNav()">

      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>

    </div>

  </div>


  <div class="nav-container" id="nav">
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact</a></li>

    </ul>
  </div>
</header>

【问题讨论】：

您可以从 'burger' 中删除 "flex:1" 以避免其右侧的红色空间。
您的.nav-container 与您的.burger 的底部重叠。

标签： javascript html css sass

【解决方案1】：

只需将 z-index = 1 放在 .burger 上即可。

.burger {
  flex: 1;
  margin-left: 40%;
  background-color: red;
  padding: 0;
  width: auto;
  z-index: 1;
}

【讨论】：

【解决方案2】：

要将您的菜单放在前面，您可以添加position:relative + z-index:1; 以确保它位于顶部。

您还添加了规则cursor: pointer; 以表明它是一个可点击元素:)

对于您添加的类，您可以使用 classList . toggle() ，因此它可以交替显示/隐藏。

例子

function showNav() {
  var nav = document.getElementById("nav");

  nav.classList.toggle("show-nav");
}

* {
  margin: 0px;
  padding: 0;
  box-sizing: border;
}

.container {
  display: flex;
  margin-top: 2%;
}

header {
  position: relative;
  z-index: 1;
}

.line1,
.line2,
.line3 {
  width: 40px;
  height: 8px;
  background-color: black;
  margin-top: 3px;
}

.nav-heading {
  flex: 4;
  margin-left: 5%;
}

.burger {
  flex: 1;
  margin-left: 40%;
  background-color: red;
  padding: 0;
  width: auto;
  cursor: pointer;
  position:relative;
  z-index:1
}

.nav-container {
  position: absolute;
  width: 100%;
  opacity: 0;
  transition: .2s ease-in-out;
  transform: translateY(-20%);
  transform-origin: left;
}

ul {
  display: flex;
  flex-direction: column;
  background-color: blue;
  width: 100%;
  align-items: center;
  list-style-type: none;
}

li {
  flex: 1;
  padding: 15px;
}

li a {
  color: black;
}

.show-nav {
  opacity: 1;
  transform: translateY(20%);
}

<header>
  <div class="container">
    <div class="nav-heading">
      <h1>Navbar</h1>
    </div>

    <div class="burger" onclick="showNav()">

      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>

    </div>

  </div>


  <div class="nav-container" id="nav">
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About</a></li>
      <li><a href="">Contact</a></li>

    </ul>
  </div>
</header>

【讨论】：

【解决方案3】：

只要改变宽度

.nav-container {
  width: 30%;
}

所以它不会与汉堡重叠。一般来说，你的 CSS 结构不好。

【讨论】：

比如宽度应该是多少。让它自动