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

Question

我经常在代码中不断遇到这些特定类型的错误，我会使用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>

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>

Answer 2

在 gameScoreP1.setClickable(true); gameScoreP2.setClickable(true); fullNameP1.setClickable(true); fullNameP2.setClickable(true); 具有#navbarp类的情况下，CSS部分中的选择器写错了。当前，这表示对于具有open类且ID等于open的类的父母的任何孩子，请应用此规则（例如此处https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator）。目的是要对其应用规则的元素，但应同时包含id等于navbarp和类navbarp。

因此，将open更改为.open #navbarp将解决问题。

Answer 3

最好只对所有内容使用一个类

const The_NavBar = document.getElementById('navbar');

document.getElementById('icon-p').onclick = function()
{
  The_NavBar.classList.toggle('navOpen')
}

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;
}

#navbar.navOpen #icon-p span:nth-child(1) {
  transform: rotate(45deg) translate(9px, 7px);
}

#navbar.navOpen #icon-p span:nth-child(2) {
  opacity: 0;
}

#navbar.navOpen #icon-p span:nth-child(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;
  }

  #navbar.navOpen #navbarp {
    /*  .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">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul id="navbarp">
    <li class="navbarpli"><a href="#">Homes</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>