html - 为什么单击菜单时不显示退出图标

Question

我已经尝试了所有方法来尝试通过给它一个索引 999 来使退出图标显示在菜单上，但仍然没有让它显示的运气，知道为什么它不工作吗？我也添加了 JavaScript。

menuBtn.addEventListener('click' , () => {
    const menu = document.querySelectorAll('.menu');
    for(let el of menu){
        el.style.display = 'block'
    }
})

/*Navbar*/

.navbar {
  width: 100%;
  position: fixed;
  font-family: "Ubuntu", sans-serif;
  padding: 30px 0;
}

.navbar .logo a {
  font-size: 2rem;
  font-weight: 600;
  color: white;
}

.navbar .logo a span {
  color: crimson;
  transition: all 0.3s ease;
}

.sticky {
  padding: 30px 0;
  background-color: crimson;
}

.sticky .logo a span {
  color: #fff;
}

.menu li {
  display: inline-block;
  list-style: none;
}

.menu li a {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  margin-left: 35px;
  padding-left: 5px;
  transition: color 0.3s ease;
}

.menu li a:hover {
  border-left: 3px solid white;
  color: crimson;
}

.sticky .menu li a:hover {
  color: white;
}

.navbar .max-width {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.max-width {
  max-width: 1300px;
  padding: 0 80px;
  margin: auto;
}


/*Menu Button*/

.fa.fa-bars.menuBtn {
  color: #fff;
  font-size: 35px;
  cursor: pointer;
  display: none;
}

.fa.fa-times-circle.exit {
  color: white;
  font-size: 35px;
  cursor: pointer;
  display: none;
}

@media (max-width: 934px) {
  .max-width {
    padding: 0 50px;
  }
  .fa.fa-bars.menuBtn {
    display: block;
    padding-left: 10em;
  }
  .menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    left: 0;
    top: 0;
    background-color: #111;
    text-align: center;
    padding-top: 110px;
    display: none;
  }
  .fa.fa-times-circle.exit {
    z-index: 999;
    display: none;
    margin: 1.8rem;
  }
  .menu ul li {
    display: block;
  }
  .menu ul li a {
    display: inline-block;
    margin: 20px 0;
    font-size: 35px;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">

<header>

  <nav class="navbar" id="nav">
    <div class="max-width">
      <div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
      <div class="menu">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Skills</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">CV</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
      <div>
        <i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>

        <i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
      </div>
    </div>
  </nav>

  <!--Head Banner-->
  <section class="home" id="home">
    <div class="max-width">
      <div class="home-content">
        <div class="text-1">Hello, my name is</div>
        <div class="text-2">Hadi Zouhbi</div>
        <div class="text-3">And I'm a <span id="headSpan">&#60;Developer&#62;</Developer></span></div>
      </div>
    </div>
  </section>
  
</header>

标签： htmlcss

Answer 1

因为它从来没有像在 menubtn 那样进入小屏幕时显示：阻止。

.fa.fa-bars.menuBtn {
    display: block;
    padding-left: 10em;
}

对@media (max-width: 934px) 下的退出图标也执行相同操作

.fa.fa-times-circle.exit {
    display: inline-block;
}

并删除此代码

.fa.fa-times-circle.exit {
    z-index: 999;
    display: none;
    margin: 1.8rem;
}

工作示例：

/*Navbar*/
body {
  background-color: #ccc;
}

.navbar {
  width: 100%;
  position: fixed;
  font-family: "Ubuntu", sans-serif;
  padding: 30px 0;
}

.navbar .logo a {
  font-size: 2rem;
  font-weight: 600;
  color: white;
}

.navbar .logo a span {
  color: crimson;
  transition: all 0.3s ease;
}

.sticky {
  padding: 30px 0;
  background-color: crimson;
}

.sticky .logo a span {
  color: #fff;
}

.menu li {
  display: inline-block;
  list-style: none;
}

.menu li a {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  margin-left: 35px;
  padding-left: 5px;
  transition: color 0.3s ease;
}

.menu li a:hover {
  border-left: 3px solid white;
  color: crimson;
}

.sticky .menu li a:hover {
  color: white;
}

.navbar .max-width {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.max-width {
  max-width: 1300px;
  padding: 0 80px;
  margin: auto;
}


/*Menu Button*/

.fa.fa-bars.menuBtn {
  color: #fff;
  font-size: 35px;
  cursor: pointer;
  display: none;
}

.fa.fa-times-circle.exit {
  color: white;
  font-size: 35px;
  cursor: pointer;
  display: none;
}

@media (max-width: 934px) {
  .max-width {
    padding: 0 50px;
  }
  .fa.fa-bars.menuBtn {
    display: block;
    padding-left: 10em;
  }
  .fa.fa-times-circle.exit {
    display: inline-block;
  }
  .menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    left: 0;
    top: 0;
    background-color: #111;
    text-align: center;
    padding-top: 110px;
    display: none;
  }
  .menu ul li {
    display: block;
  }
  .menu ul li a {
    display: inline-block;
    margin: 20px 0;
    font-size: 35px;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">

<header>

  <nav class="navbar" id="nav">
    <div class="max-width">
      <div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
      <div class="menu">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Skills</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">CV</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
      <div>
        <i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>

        <i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
      </div>
    </div>
  </nav>

  <!--Head Banner-->
  <section class="home" id="home">
    <div class="max-width">
      <div class="home-content">
        <div class="text-1">Hello, my name is</div>
        <div class="text-2">Hadi Zouhbi</div>
        <div class="text-3">And I'm a <span id="headSpan">&#60;Developer&#62;</Developer></span></div>
      </div>
    </div>
  </section>
  
</header>