如何在 vanilla JavaScript 中切换多个类？

Question

I seem to be running into a bit of issues with by off canvas navigation. I'm trying to toggle two classes on one event listener, it's working with the nav menu, but it's not toggling the class on the .Site element. What am I doing wrong?

I'm trying to have the .Site element add a class to set the margin-left to 20% and have a width of 80% while the off canvas menu gets the width of 20% from 0 . The Navigation works, but the .Site toggle doesn't work.

 let navToggle = document.querySelector('.menuButton'); let nav = document.querySelector('.SiteNavigation'); let site = document.querySelector('.Site'); navToggle.addEventListener('click', (event) => { nav.classList.toggle("SiteNavigationOpen"); site.classList.toggle("SiteNavOpen"); });

 @use postcss-nested; @use postcss-simple-vars; html { background: #fff; scroll-behavior: smooth; line-height: 1.15; -webkit-font-smoothing: subpixel-antialiased; -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%; text-shadow: none; text-rendering: optimizeLegibility; -webkit-font-variant-ligatures: common-ligatures; font-variant-ligatures: common-ligatures; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: "kern"; font-feature-settings: "kern"; -webkit-font-kerning: normal; font-kerning: normal; font-size: calc(16px + (40 - 16) * ( (100vw - 320px) / (7680 - 320))); } html, body { font-family: 'Lato', sans-serif; } h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.1; margin-bottom: 1.1rem; } h1 { font-size: 2.25rem } h2 { font-size: 2rem; } h3 { font-size: 1.75em } h4 { font-size: 1.5rem } h5 { font-size: 1.25rem } h6 { font-size: 1rem; } p { line-height: 1.5; font-size: 1rem; margin-bottom: 1.1rem; font-weight: 300; } p.--mousePrint { font-size: 0.8rem; } .textCenter { text-align: center; } .Site { width: 100%; margin-left: 0; } .SiteNavOpen { width: 80%; margin-left: 20%; } .menuButton { position: absolute; top: 1vh; right: 1vw; border: none; background: none; color: #eaeaea; } .SiteHeader { min-height: 100vh; background: url('https://images.unsplash.com/photo-1499750310107-5fef28a66643?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center center; background-size: cover; background-attachment: fixed; position: relative; display: flex; align-items: center; justify-content: center; color: #eaeaea; filter: sepia(40%); } .siteBranding { display: flex; flex-direction: column; } .siteBranding a { color: #eaeaea; } .SiteMain { background: #eaeaea; color: #353535; padding-left: 5vw; padding-right: 5vw; padding-top: 5vh; padding-bottom: 5vh; } .mainInner { @media (min-width: 1280px) { max-width:66vw; margin: 0 auto; } } .articleMain { max-width: 33em; margin: 0 auto; } .--textCenter { text-align: center; } .SiteNavigation { background: #66023c; color: #eaeaea; height: 100vh; width: 0; position: fixed; top: 0; left: 0; z-index: 1; overflow-x: hidden; display: flex; align-items: center; justify-content: center; transition: all 0.13s; } .SiteNavigationOpen { width: 20%; } .SiteNavigation a { color: #eaeaea; } .SiteNavigation li { transition: all 0.13s; } .SiteNavigation li:hover { transform: scale(1.2, 1.2); } .Site { width: 100%; margin-left: 0%; transition: all 0.13s; } .SiteColophon { background: #66023c; color: #eaeaea; padding-left: 5vw; padding-right: 5vw; padding-top: 5vh; padding-bottom: 5vh; } .colophonInner { @media (min-width: 1280px) { max-width:66vw; margin: 0 auto; } } .SiteFooter { background: #66023c; color: #eaeaea; padding-left: 5vw; padding-right: 5vw; padding-top: 5vh; padding-bottom: 5vh; } .footerInner { @media (min-width: 1280px) { max-width:66vw; margin: 0 auto; } } .socialMedia { text-align: center; } .fab:hover { transform: scale(1.2, 1.2); } .--btnLink { background: none; color: none; border: none; } .socialMediaButton { transition: all 0.13s; } .socialMediaButton:hover { transform: scale(1.5, 1.5); }

 <nav class="SiteNavigation"> <ul class="nav"> <li><a href="#">HOME</a></li> <li><a href="#">SERVICES</a></li> <li><a href="#">THEMES</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> <div class="Site"> <header class="SiteHeader"> <button class="menuButton"> <i class="fas fa-bars"></i> </button> <div class="siteBranding"> <h1 class="textCenter">TEOTIHUACAN DESIGN</h1> <p class="textCenter">Quality Websmiths</p> <button class="btn --btnLink alignCenter"><a href="#main"><i class="fas fa-arrow-circle-down fa-2x"></i></a></button> </div> </header> <main id="main" class="SiteMain"> <div class="mainInner"> <article class="articleMain"> <header class="articleHeader"> <h1 class="--textCenter">Niltze! (it means Hello!)</h1> </header> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere molestiae ex qui laudantium, nobis voluptate quaerat suscipit veritatis ducimus animi corporis, perspiciatis aliquam aliquid! Corrupti dicta magnam autem labore quo.</p> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. In obcaecati, consequatur sed officiis deleniti maxime reprehenderit possimus fugiat officia quasi, nemo doloremque numquam pariatur doloribus! Tempora facere harum earum provident nulla, ipsam quos animi minus esse nihil! Tempore officiis possimus facilis sint, vel id ipsam obcaecati dolor dolorem suscipit molestias aliquam quaerat itaque distinctio beatae voluptates nostrum nesciunt voluptate? Quae temporibus vitae molestias magnam sed, nostrum ducimus nulla, totam ad nihil aut magni asperiores natus esse quasi omnis quod voluptatem? Molestiae, possimus eos quis eveniet rerum tenetur aliquam ullam nemo? Laudantium ratione perspiciatis possimus quos quaerat quibusdam, labore quod deserunt temporibus assumenda ipsam quasi repudiandae maiores quia sed architecto culpa nam cum veritatis fugiat itaque! Accusantium eos velit sunt quia soluta perspiciatis laudantium iste, neque minus consequuntur tempora incidunt aliquid!</p> </article> </div> </main> <section class="SiteColophon"> <div class="colophonInner"> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque laborum ipsam dolores nisi nesciunt. Doloribus recusandae rem aliquam veniam, soluta repellat earum, alias accusamus ipsam dolorum quo voluptatum dolor dolore.</p> </div> </section> <footer class="SiteFooter"> <div class="footerInner"> <p class="--mousePrint textCenter">Copyright &copy; 2020 Teotihuacan Design. Powered by WordPress</p> <div class="socialMedia"> <button class="btn --btnLink socialMediaButton"><i class="fab fa-facebook"></i></button> <button class="btn --btnLink socialMediaButton"><i class="fab fa-twitter"></i></button> <button class="btn --btnLink socialMediaButton"><i class="fab fa-instagram"></i></button> <button class="btn --btnLink socialMediaButton"><i class="fab fa-behance"></i></button> <button class="btn --btnLink socialMediaButton"><i class="fab fa-dribbble"></i></button> </div> </div> </footer> </div>

Answer 1

I've checked your code and the classes apply correctly. If you inspect the divs you can see the classes applying.

The problem is in .SiteNavOpen CSS. Add the !important tag because width and margin-left get overwritten by .Site. Or, to avoid doing that add that CSS to .Site .SiteNavOpen. Like this:

.SiteNavOpen {
    width: 80% !important;
    margin-left: 20% !important;
}
//OR
.Site .SiteNavOpen {
    width: 80%;
    margin-left: 20%;
}

Also I would suggest you start using the DevTools in your browser. If a class CSS gets overwritten and ignored by another class you can see that there and realize where the problems come from.