javascript - Javascript Toggle类正常工作，但下拉列表中的类无效

我经常在代码中经常遇到这些特定类型的错误，我会使用JavaScript将切换功能添加到元素的classList中，并且如果我使用inspect元素进行检查，代码将切换该类，但是该类将无效添加到元素中...

现在我的问题是:

在以下媒体查询(max-width: 605px)的代码中，我试图进行下拉导航。我在CSS中的display:none中添加了#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>

最佳答案

将.open #navbarp更改为#navbarp.open(#navbarp和.open之间没有空格)。前者针对ID为navbarp的元素，其父元素为.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>