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

问题描述

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

我正在尝试让 .Site 元素添加一个类来设置margin-leftto20%并有一个widthof80%而关闭画布菜单width获取20%from 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>

标签： javascripthtmlcssclasstoggle

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

问题描述

解决方案

推荐阅读