자바스크립트 토글 하는 방법

==js==

const toggleBtn = document.querySelector(".navbar_toggleBtn");

//toggleBtn 이라는 변수에

//document.querySelector 를 이용해서

//html 안에있는 클레스 로드중에 .navbar_toogleBtn라는 클레스가진 아이를 찾아서

//toggleBtn에 연결시켜주는것이다.

const menu = document.querySelector(".navbar_menu");

const icon = document.querySelector(".navbar_icon");

 

toggleBtn.addEventListener("click", () => {

  //toggleBtn이 클릭될때마다 이벤트를 처리

  //click이 될떄마다 지금 우리가

  //지정하고 있는 이 함수를 호출해줘라고 정의

 

menu.classList.toggle("active");

icon.classList.toggle("active");

  //menu, icon에 있는 classList 중에 active 클레스를 toggle 할거다.

  // 이말은 마우스를 클릭했을때 menu, icon 클레스가

  //active가 없다면 추가해주고

  //active 가 없다면 다시 빼주는 일을 해줄거다

});

 

==css==

평소 display:none;

 

클릭시 

.navbar_menu.active,

  .navbar_icon.active {

    display: flex;

  }