当我单击“显示更多”按钮时，为什么类 - .menu-hidden 没有被删除

Question

Here is the html

<ul class="menu__box d-flex flex-column " id="menu-ul">
        <div class="menu-title-container d-flex align-items-center justify-content-center">
      <p class="menu-title">Most Popular</p>
      </div>
      
            <li><a class="menu__item" href="#">Batteries</a></li>
            <li><a class="menu__item" href="#">Engine Oil</a></li>
            <li><a class="menu__item" href="#">Spark Plugs</a></li>
            <li><a class="menu__item" href="#">Tyres</a></li>
            <li><a class="menu__item menu-hidden" href="#">ATF</a></li>
            <li><a class="menu__item menu-hidden" href="#">Rims</a></li>
            <li><a class="menu__item menu-hidden" href="#">MOBIS Hyundai</a></li>
            <li class="menu-btn-expand"><a class="menu__item" href="#" id="showMore">Show More</a></li>
            
            <div class="menu-title-container d-flex align-items-center justify-content-center">
            <p class="menu-title">Shop Deals</p>
            </div>
            
            <li><a class="menu__item" href="#">Top Deals</a></li>
            
            <div class="menu-title-container d-flex align-items-center justify-content-center">
            <p class="menu-title">Shop By</p>
            </div>
            
            <li><a class="menu__item" href="#">By Make</a></li>
            <li><a class="menu__item" href="#">By Model</a></li>
            
            <div class="menu-title-container d-flex align-items-center justify-content-center">
            <p class="menu-title">Trustworthy Advice</p>
            </div>
              <li><a class="menu__item" href="#">Advice & How to's</a></li>
             <li><a class="menu__item" href="#">Find Us</a></li>
             <div class="menu-title-container d-flex align-items-center justify-content-center">
            <p class="menu-title">Contact Us</p>
            </div>
              <li><a class="menu__item" href="#">Contact</a></li>   

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

Here is the CSS

#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked ~ .menu__btn > span {
  transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
  top: 0;
  transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
  visibility: visible;
  left: 0;
}

.menu__btn {
  display: flex;
  align-items: center;
  position: relative;
  top: -1rem;
  left: 3rem;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;

  width: 100%;
  height: 5px;

  background-color: #616161;

  transition-duration: 0.25s;
}
.menu__btn > span::before {
  content: "";
  top: -8px;
}
.menu__btn > span::after {
  content: "";
  top: 8px;
}

.menu__box {
  display: block;
  position: fixed;
  visibility: hidden;
  left: -100%;
  width: 300px;
  height: 70%;
  margin: 0;
  padding: 1rem 0;
  list-style: none;
  background-color: #fff;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
  border-right: 1px solid black;
  border-top: 1px solid black;
  overflow: auto !important;
  transition-duration: 0.25s;
}

.menu__box li a {
  font-size: 0.8rem;
  font-family: "Poppins";
}

.menu__item {
  display: block;
  padding: 12px 24px;

  color: #333;

  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 600;

  text-decoration: none;
  border-top: none;

  transition-duration: 0.25s;
}
.menu__item:hover {
  background-color: #f5f5f5;
}

.menu-line-break {
  background-color: #f5f5f5;
  width: 3rem;
  height: 0.2rem;
  margin: 0.5rem auto;
}

.menu-btn-expand {
  text-decoration: underline;
}

.menu-title-container {
  width: 100%;
}

.menu-hidden {
  display: none;
}

The Javascript

let showMore = document.querySelector('#showMore');

showMore.addEventListener('click' , () => {
  let hiddenLi = document.querySelectorAll('.menu__item');

  hiddenLi.classList.remove("menu-hidden")
})

The initial li with the class of menu-hidden is put on display none . However , when i am removing the class as seen in my code the li still do not show. What's the solution , I appreciate the help . I am kind of new to this so I might be making a silly mistake i do not know.

Answer 1

The class stays because document.querySelectorAll('.menu__item'); gets every element with that class. So you need to remove the class from each element, which can be done with a for-loop.

 let showMore = document.querySelector('#showMore'); showMore.addEventListener('click' , () => { let hiddenLi = document.querySelectorAll('.menu__item'); for (var i = 0; i < hiddenLi.length; i++) { hiddenLi[i].classList.remove("menu-hidden") } })

 .menu-hidden { display: none; } li { list-style-type: none; }

 <ul> <li><a class="menu__item" href="#">Spark Plugs</a></li> <li><a class="menu__item menu-hidden" href="#">MOBIS Hyundai</a></li> <li><a class="menu__item menu-hidden" href="#">Rims</a></li> <li><a class="menu__item menu-hidden" href="#">ATF</a></li> <li class="menu-btn-expand"><a class="menu__item" href="#" id="showMore">Show More</a></li> </ul>

Answer 2

hiddenLi is actually a collection. You should run through each element of the collection.

 let showMore = document.querySelector('#showMore'); showMore.addEventListener('click' , () => { let hiddenLi = document.querySelectorAll('.menu__item'); hiddenLi.forEach(each => each.classList.remove("menu-hidden")) })

 #menu__toggle { opacity: 0; } #menu__toggle:checked ~ .menu__btn > span { transform: rotate(45deg); } #menu__toggle:checked ~ .menu__btn > span::before { top: 0; transform: rotate(0); } #menu__toggle:checked ~ .menu__btn > span::after { top: 0; transform: rotate(90deg); } #menu__toggle:checked ~ .menu__box { visibility: visible; left: 0; } .menu__btn { display: flex; align-items: center; position: relative; top: -1rem; left: 3rem; width: 26px; height: 26px; cursor: pointer; z-index: 1; } .menu__btn > span, .menu__btn > span::before, .menu__btn > span::after { display: block; position: absolute; width: 100%; height: 5px; background-color: #616161; transition-duration: 0.25s; } .menu__btn > span::before { content: ""; top: -8px; } .menu__btn > span::after { content: ""; top: 8px; } .menu__box { display: block; /* position: fixed; visibility: hidden; */ left: -100%; width: 300px; height: 70%; margin: 0; padding: 1rem 0; list-style: none; background-color: #fff; box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2); border-right: 1px solid black; border-top: 1px solid black; overflow: auto !important; transition-duration: 0.25s; } .menu__box li a { font-size: 0.8rem; font-family: "Poppins"; } .menu__item { display: block; padding: 12px 24px; color: #333; font-family: "Roboto", sans-serif; font-size: 20px; font-weight: 600; text-decoration: none; border-top: none; transition-duration: 0.25s; } .menu__item:hover { background-color: #f5f5f5; } .menu-line-break { background-color: #f5f5f5; width: 3rem; height: 0.2rem; margin: 0.5rem auto; } .menu-btn-expand { text-decoration: underline; } .menu-title-container { width: 100%; } .menu-hidden { display: none; }

 <ul class="menu__box d-flex flex-column " id="menu-ul"> <div class="menu-title-container d-flex align-items-center justify-content-center"> <p class="menu-title">Most Popular</p> </div> <li><a class="menu__item" href="#">Batteries</a></li> <li><a class="menu__item" href="#">Engine Oil</a></li> <li><a class="menu__item" href="#">Spark Plugs</a></li> <li><a class="menu__item" href="#">Tyres</a></li> <li><a class="menu__item menu-hidden" href="#">ATF</a></li> <li><a class="menu__item menu-hidden" href="#">Rims</a></li> <li><a class="menu__item menu-hidden" href="#">MOBIS Hyundai</a></li> <li class="menu-btn-expand"><a class="menu__item" href="#" id="showMore">Show More</a></li> <div class="menu-title-container d-flex align-items-center justify-content-center"> <p class="menu-title">Shop Deals</p> </div> <li><a class="menu__item" href="#">Top Deals</a></li> <div class="menu-title-container d-flex align-items-center justify-content-center"> <p class="menu-title">Shop By</p> </div> <li><a class="menu__item" href="#">By Make</a></li> <li><a class="menu__item" href="#">By Model</a></li> <div class="menu-title-container d-flex align-items-center justify-content-center"> <p class="menu-title">Trustworthy Advice</p> </div> <li><a class="menu__item" href="#">Advice & How to's</a></li> <li><a class="menu__item" href="#">Find Us</a></li> <div class="menu-title-container d-flex align-items-center justify-content-center"> <p class="menu-title">Contact Us</p> </div> <li><a class="menu__item" href="#">Contact</a></li> </ul>