troubleshooting Question

How is classList being used in this codepen?

Avatar of dlearman1
dlearman1Flag for United States of America asked on
3 Comments1 Solution7 ViewsLast Modified:
I'm trying to understand the logic in this codepen I'm confused by how classList is being used to add/remove the active class.
  1. variable menu is defined by const menu = document.querySelector(".menu");
  2.  In HTML, class .menu is applied to the top ul element
  3.  It seems to me that the code menu.classList.add("active"); is adding the class "active" to the ul element
  4. But in the codepen CSS, it appears to be added to <li class="item"> a child of menu.
I believe the ul element cannot be show/hide toggled directly, because it needs to remain displayed for non-mobile windows. I don't see that classList will recursively search children.

The codepen works so I'm missing something.
Log in to continue reading
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform for $9.99/mo
View membership options
Unlock 1 Answer and 3 Comments.
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
The Value of Experts Exchange in My Daily IT Life

Experts Exchange (EE) has become my company's go-to resource to get answers. I've used EE to make decisions, solve problems and even save customers. OutagesIO has been a challenging project and... Keep reading >>


Owner of Outages.IO
Phoenix, Arizona, United States
Member Since 2016
Join a full scale community that combines the best parts of other tools into one platform.
Unlock 1 Answer and 3 Comments.
View membership options
“All of life is about relationships, and EE has made a virtual community a real community. It lifts everyone's boat.”
William Peck

Member since 2004