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

【问题标题】：How to toggle multiple classes in vanilla JavaScript?如何在 vanilla JavaScript 中切换多个类？
【发布时间】：2020-02-26 10:10:27
【问题描述】：

我似乎在使用画布外导航时遇到了一些问题。我正在尝试在一个事件侦听器上切换两个类，它正在使用导航菜单，但它没有切换 .Site 元素上的类。我做错了什么？

我正在尝试让 .Site 元素添加一个类以将 margin-left 设置为 20% 并拥有 width 的 80% 而关闭画布菜单获取 width 的 20%来自0。导航有效，但 .Site 切换无效。

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>

【问题讨论】：

标签： javascript html css class toggle

【解决方案1】：

我已经检查了您的代码并且类正确应用。如果您检查 div，您可以看到应用的类。

问题出在 .SiteNavOpen CSS 中。添加 !important 标记，因为 width 和 margin-left 会被 .Site 覆盖。或者，为了避免这样做，将 CSS 添加到 .Site .SiteNavOpen。像这样：

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

另外，我建议您开始在浏览器中使用 DevTools。如果一个类 CSS 被另一个类覆盖和忽略，您可以在那里看到并意识到问题出在哪里。

【讨论】：