javascript - 如何在普通 JavaScript 中切换多个类？

Question

我似乎在 Canvas 外导航方面遇到了一些问题。我正在尝试在一个事件监听器上切换两个类，它正在使用导航菜单，但它不会切换 .Site 元素上的类。我做错了什么？

我试图让 .Site 元素添加一个类，将 margin-left 设置为 20% 并具有 width 80%，而 Canvas 外菜单则从 0 获取 20% 的宽度。导航可以工作，但 .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>

Answer 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 被另一个类覆盖并忽略，您可以在那里看到并意识到问题来自哪里。