Javascript Toggle 类有效但类在下拉列表中的元素中无效

Question

我经常在我的代码中不断遇到这些特定类型的错误，我将使用 JavaScript 向元素的 classList 添加一个切换函数，如果我使用检查进行检查，代码将切换类元素，但该类对我将其添加到的元素无效....

现在我的问题是:

在下面的媒体查询代码中 (max-width: 605px)，我试图制作一个下拉导航。我将 display:none 添加到 CSS 中的 #navbarp 并添加了另一个类 .open #navbarp { display:flex}，然后我使用 JavaScript 切换 .open 类。 JavaScript 正在将 .open 类切换到 #navbarp 但 CSS 类无效——display: none 无效更改为 display:flex。

请到下面的链接查看代码

https://codepen.io/enipx/pen/zegJeP

var iconBtn = document.getElementById('icon-p');
var navbarp = document.getElementById('navbarp')

function openNav() {
  iconBtn.classList.toggle('click');
  navbarp.classList.toggle('open');
}

body {
  font-family: arial;
  margin: 0;
  padding: 0;
}


/* ==== NAVBAR */

#navbar {
  background: linear-gradient(to right, #E5DDB3, #F7F1CF);
  display: flex;
  height: 60px;
  align-items: center;
}


/* ==== NAVBAR ICON */

#navbar #icon-p {
  display: flex;
  flex-direction: column;
  margin-left: 60px;
}

#navbar #icon-p:hover span {
  background-color: #333;
}

#icon-p span {
  width: 52px;
  height: 6px;
  border-radius: 3px;
  margin-bottom: 6px;
  background-color: gray;
  transition: .4s;
}

.click .icon-1 {
  transform: rotate(45deg) translate(9px, 7px);
}

.click .icon-2 {
  opacity: 0;
}

.click .icon-3 {
  transform: rotate(-45deg) translate(9px, -7px);
}


/* ==== NAVBAR ELEMENT */

#navbarp {
  display: flex;
  list-style: none;
  margin-left: auto;
  margin-right: 80px;
}

#navbarp .navbarpli {
  padding: 10px 25px;
}

#navbarp .navbarpli a {
  text-decoration: none;
  font-size: 1.2em;
  color: gray;
  transition: .7s;
}

#navbarp .navbarpli a:hover {
  color: #333;
}


/* ==== NAVBAR DROPDOWN */

#dropdown {
  list-style-type: none;
  background-color: #F7F1CF;
  position: absolute;
  align-items: center;
  width: 200px;
  margin-top: 18px;
  display: none;
  animation-name: zoom;
  animation-duration: .1s;
}

@keyframes zoom {
  from {
    transform: scale(.9);
  }
  to {
    transform: scale(1);
  }
}

#dropdown li {
  margin: 0;
  margin-left: -40px;
  padding: 15px 10px;
}

#dropdown li:hover {
  background-color: #E2DCBB;
}

#dropdownBtn:hover #dropdown {
  display: block;
}


/* ==== media 910px */

@media (max-width: 910px) {
  #navbarp {
    margin-right: 30px;
  }
  #navbar #icon-p {
    display: flex;
    flex-direction: column;
    margin-left: 30px;
  }
}

@media (max-width: 800px) {
  #navbarp {
    margin-right: 20px;
  }
  #navbar #icon-p {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
  }
  #navbarp .navbarpli {
    padding: 10px 20px;
  }
  #navbarp .navbarpli a {
    font-size: 1.1em;
  }
}


/* ==== media 700px */

@media (max-width: 706px) {
  #navbarp {
    margin-right: 5px;
  }
  #navbar #icon-p {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
  }
  #navbarp .navbarpli {
    padding: 10px 18px;
  }
  #navbarp .navbarpli a {
    font-size: 1em;
  }
}


/* ==== media 605px */

@media (max-width: 605px) {
  #navbar {
    flex-direction: column;
  }
  #navbarp {
    flex-direction: column;
    background: linear-gradient(to right, #E5DDB3, #F7F1CF);
    width: 100%;
    height: 0;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    display: none;
    overflow: hidden;
  }
  .open #navbarp {
    display: flex;
  }
  #navbarp .navbarpli {
    padding: 20px 0px;
  }
  #navbarp .navbarpli a {
    font-size: 1.2em;
  }
  #navbar #icon-p {
    margin: 0px;
    margin: 12px 0;
  }
  #dropdown {
    text-align: center;
    margin-top: 10px;
    right: 30%;
  }
}

<div id="navbar">
  <div id="icon-p" onclick="openNav()">
    <span class="icon-1"></span>
    <span class="icon-2"></span>
    <span class="icon-3"></span>
  </div>
  <ul id="navbarp">
    <li class="navbarpli"><a href="#">Home</a></li>
    <li class="navbarpli"><a href="#">Explore</a></li>
    <li class="navbarpli"><a href="#">Filter</a></li>
    <li class="navbarpli" id="dropdownBtn"><a href="#">Discover</a>
      <ul id="dropdown">
        <li><a href="#">By Age</a></li>
        <li><a href="#">By User</a></li>
        <li><a href="#">By Name</a></li>
        <li><a href="#">By State</a></li>
      </ul>
    </li>
    <li class="navbarpli"><a href="#">Affiliate</a></li>
    <li class="navbarpli"><a href="#">More</a></li>
  </ul>
</div>

Answer 1

• 将 .open #navbarp 更改为 #navbarp.open(#navbarp 和 .open 之间没有空格).前者以 id 为 navbarp 的元素为目标，其 parent 具有类 .open。使用后者(没有空格)以同时具有 ID 和类的元素为目标。
• 移除 height: 0 和 overflow: hidden。这些使元素消失，即使 display: flex 被应用。你不应该需要它们，因为你有 display: none 这使得它们在应该隐藏时完全消失。

var iconBtn = document.getElementById('icon-p');
var navbarp = document.getElementById('navbarp')

function openNav() {
  iconBtn.classList.toggle('click');
  navbarp.classList.toggle('open');
}

body {
  font-family: arial;
  margin: 0;
  padding: 0;
}


/* ==== NAVBAR */

#navbar {
  background: linear-gradient(to right, #E5DDB3, #F7F1CF);
  display: flex;
  height: 60px;
  align-items: center;
}


/* ==== NAVBAR ICON */

#navbar #icon-p {
  display: flex;
  flex-direction: column;
  margin-left: 60px;
}

#navbar #icon-p:hover span {
  background-color: #333;
}

#icon-p span {
  width: 52px;
  height: 6px;
  border-radius: 3px;
  margin-bottom: 6px;
  background-color: gray;
  transition: .4s;
}

.click .icon-1 {
  transform: rotate(45deg) translate(9px, 7px);
}

.click .icon-2 {
  opacity: 0;
}

.click .icon-3 {
  transform: rotate(-45deg) translate(9px, -7px);
}


/* ==== NAVBAR ELEMENT */

#navbarp {
  display: flex;
  list-style: none;
  margin-left: auto;
  margin-right: 80px;
}

#navbarp .navbarpli {
  padding: 10px 25px;
}

#navbarp .navbarpli a {
  text-decoration: none;
  font-size: 1.2em;
  color: gray;
  transition: .7s;
}

#navbarp .navbarpli a:hover {
  color: #333;
}


/* ==== NAVBAR DROPDOWN */

#dropdown {
  list-style-type: none;
  background-color: #F7F1CF;
  position: absolute;
  align-items: center;
  width: 200px;
  margin-top: 18px;
  display: none;
  animation-name: zoom;
  animation-duration: .1s;
}

@keyframes zoom {
  from {
    transform: scale(.9);
  }
  to {
    transform: scale(1);
  }
}

#dropdown li {
  margin: 0;
  margin-left: -40px;
  padding: 15px 10px;
}

#dropdown li:hover {
  background-color: #E2DCBB;
}

#dropdownBtn:hover #dropdown {
  display: block;
}


/* ==== media 910px */

@media (max-width: 910px) {
  #navbarp {
    margin-right: 30px;
  }
  #navbar #icon-p {
    display: flex;
    flex-direction: column;
    margin-left: 30px;
  }
}

@media (max-width: 800px) {
  #navbarp {
    margin-right: 20px;
  }
  #navbar #icon-p {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
  }
  #navbarp .navbarpli {
    padding: 10px 20px;
  }
  #navbarp .navbarpli a {
    font-size: 1.1em;
  }
}


/* ==== media 700px */

@media (max-width: 706px) {
  #navbarp {
    margin-right: 5px;
  }
  #navbar #icon-p {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
  }
  #navbarp .navbarpli {
    padding: 10px 18px;
  }
  #navbarp .navbarpli a {
    font-size: 1em;
  }
}


/* ==== media 605px */

@media (max-width: 605px) {
  #navbar {
    flex-direction: column;
  }
  #navbarp {
    flex-direction: column;
    background: linear-gradient(to right, #E5DDB3, #F7F1CF);
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    display: none;
  }
  .open#navbarp {
    display: flex;
  }
  #navbarp .navbarpli {
    padding: 20px 0px;
  }
  #navbarp .navbarpli a {
    font-size: 1.2em;
  }
  #navbar #icon-p {
    margin: 0px;
    margin: 12px 0;
  }
  #dropdown {
    text-align: center;
    margin-top: 10px;
    right: 30%;
  }
}

<div id="navbar">
  <div id="icon-p" onclick="openNav()">
    <span class="icon-1"></span>
    <span class="icon-2"></span>
    <span class="icon-3"></span>
  </div>
  <ul id="navbarp">
    <li class="navbarpli"><a href="#">Home</a></li>
    <li class="navbarpli"><a href="#">Explore</a></li>
    <li class="navbarpli"><a href="#">Filter</a></li>
    <li class="navbarpli" id="dropdownBtn"><a href="#">Discover</a>
      <ul id="dropdown">
        <li><a href="#">By Age</a></li>
        <li><a href="#">By User</a></li>
        <li><a href="#">By Name</a></li>
        <li><a href="#">By State</a></li>
      </ul>
    </li>
    <li class="navbarpli"><a href="#">Affiliate</a></li>
    <li class="navbarpli"><a href="#">More</a></li>
  </ul>
</div>