Как переключить несколько классов в ванили JavaScript? - PullRequest
Новая
       4

Как переключить несколько классов в ванили JavaScript?

1 голос
/ 26 февраля 2020

Кажется, у меня возникли проблемы с навигацией вне холста. Я пытаюсь переключить два класса в одном приемнике событий, он работает с навигационным меню, но не переключает класс в элементе .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>

1 Ответ

0 голосов
/ 26 февраля 2020

Я проверил ваш код и классы применяются правильно. Если вы посмотрите div, вы увидите, как применяются классы.

Проблема в .SiteNavOpen CSS. Добавьте тег! Важный, потому что ширина и поля слева перезаписываются на .Site. Или, чтобы избежать этого, добавьте это CSS к .Site .SiteNavOpen. Например: 

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

Также я бы посоветовал вам начать использовать DevTools в вашем браузере. Если класс CSS перезаписывается и игнорируется другим классом, вы можете увидеть это и понять, откуда возникли проблемы.

...