Как удалить класс в JS после повторного нажатия? - PullRequest
Новая
       16

Как удалить класс в JS после повторного нажатия?

0 голосов
/ 22 марта 2020

Я пытаюсь заставить меню гамбургера поворачиваться к x, поэтому я использую немного javascript. Кто-нибудь знает, как сделать так, чтобы, если я щелкаю один раз, он переключает класс, и если я нажимаю снова, класс исчезает, и я добавляю другой класс?

Вот мой код: 

const hamburger = document.querySelector('.hamburger')
const navLinks = document.querySelector('.nav-links')
const links = document.querySelectorAll('.nav-links li')
const line = document.querySelector('.line')

hamburger.addEventListener('click', () => {
    navLinks.classList.toggle("open");
    line.classList.toggle("open");
    navLinks.classList.toggle("close");
    line.classList.toggle("close");
    links.forEach(link => {
        link.classList.toggle("fade");
    });
});
:root {
    --darkslategray: #373554;
    --circlebottom: #5b78c7;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Sen', sans-serif;
}

nav {
    height: 10vh;
    background-color: #5b78c7;
}

.nav-links {
    display: flex;
    list-style: none;
    width: 50%;
    height: 100%;
    justify-content: space-around;
    margin-left: auto;
    align-items: center;
}

.nav-links li a {
    color: white;
    text-decoration: none;
}

.landing {
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.landing h1 {
    margin: 100px;
    font-size: 50px;
    color: #ae5fce;
}

.line {
    width: 40px;
    height: 3px;
    background: white;
    margin: 10px;
  }
  nav {
    position: relative;
  }

  .hamburger {
    position: absolute;
    cursor: pointer;
    right: 3%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 2;
  }

  .nav-links {
    position: fixed;
    background: #5b78c7;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    clip-path: circle(100px at 90% -10%);
    -webkit-clip-path: circle(100px at 90% -10%);
    transition: all 1.5s ease-out;
    pointer-events: none; 
  }

  .nav-links.open {
  clip-path: circle(2700px at 90% -10%);
  -webkit-clip-path: circle(2700px at 90% -10%);
  pointer-events: all;
  }

  .nav-links .line1.open {
      transform: translateX(-50px );
  }

  .landing {
      flex-direction: column;
  }

  .nav-links li {
      opacity: 0;
  }
  
  .nav-links li a {
      font-size: 25px;
  }

  .nav-links li:nth-child(1) {
      transition: all 0.5s ease 0.2s;
  }

  .nav-links li:nth-child(2) {
      transition: all 0.5s ease 0.4s;
  }

  .nav-links li:nth-child(3) {
      transition: all 0.5s ease 0.6s;
  }

  li.fade {
      opacity: 1;
  }

  .line1.open {
      transform: rotate(45deg);
      transition: 0.5s ease-out;
  }

  .line1.close {
  }



@media screen and (max-width: 768px) {
    .line {
      width: 30px;
      height: 3px;
      background: white;
      margin: 5px;
    }
    nav {
      position: relative;
    }
  
    .hamburger {
      position: absolute;
      cursor: pointer;
      right: 5%;
      top: 50%;
      transform: translate(-5%, -50%);
      z-index: 2;
    }
  
    .nav-links {
      position: fixed;
      background: #5b78c7;
      height: 100vh;
      width: 100%;
      flex-direction: column;
      clip-path: circle(100px at 90% -10%);
      -webkit-clip-path: circle(100px at 90% -10%);
      transition: all 1s ease-out;
      pointer-events: none; 
    }

    .nav-links.open {
    clip-path: circle(1165px at 90% -10%);
    -webkit-clip-path: circle(1165px at 90% -10%);
    pointer-events: all;
    }

    .landing {
        flex-direction: column;
    }

    .nav-links li {
        opacity: 0;
    }
    
    .nav-links li a {
        font-size: 25px;
    }

    .nav-links li:nth-child(1) {
        transition: all 0.5s ease 0.2s;
    }

    .nav-links li:nth-child(2) {
        transition: all 0.5s ease 0.4s;
    }

    .nav-links li:nth-child(3) {
        transition: all 0.5s ease 0.6s;
    }

    li.fade {
        opacity: 1;
    }
}    
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="https://fonts.googleapis.com/css?family=Sen&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css" />
    <title>Bubble Effect</title>
  </head>
  <body>
    <nav>
      <div class="hamburger">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
      </div>
      <ul class="nav-links">
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Projects</a></li>
      </ul>
    </nav>

    <section class="landing">
      <img src="./circles.svg" alt="dots" />
      <h1>Dots</h1>
    </section>

    <script src="app.js"></script>
  </body>

(извините, если это сбивает с толку)

...