Sidebar

내가 하고 싶은 기능은 사이드바의 토글 버튼을 누르면 옆에 안 보이던 사이드 바가 나오고 다시 닫기 버튼을 누르면 사이드 바가 다시 숨는다. 이 기능을 하기 위해서 classList를 이용하여 class를 조건식에 따라 remove하거나 add를 하면 된다.

• classList , remove, add
• if...else

const toggleBtn = document.querySelector('.sidebar-toggle');
const closeBtn = document.querySelector('.close-btn');
const sidebar = document.querySelector('.sidebar');

toggleBtn.addEventListener('click', function() {
  // if(sidebar.classList.contains('show-sidebar')) {
  //   sidebar.classList.remove('show-sidebar');
  // } else {
  //   sidebar.classList.add('show-sidebar');
  // }
  sidebar.classList.toggle('show-sidebar');
})

closeBtn.addEventListener('click', function() {
  sidebar.classList.remove('show-sidebar');
})

배운 점

이렇게 classList , remove, add, if...else를 다 사용하지 않고 위와 같은 기능을 하는 function이 존재한다.

바로 toggle이다.

toggle는 className이 존재하는지 확인하고, 만약 존재한다면 className을 제거한다. 존재하지 않으면 추가한다.

toggleBtn.addEventListener('click', function() {
  // if(sidebar.classList.contains('show-sidebar')) {
  //   sidebar.classList.remove('show-sidebar');
  // } else {
  //   sidebar.classList.add('show-sidebar');
  // }
  sidebar.classList.toggle('show-sidebar');
})