时间戳

首页 > 解决方案 > How can I toggle my sidebar by using just javascript?

javascript - How can I toggle my sidebar by using just javascript?

问题描述

I've tried to use the removeEventListener with the opposite marks but that didn't work. I've also tried the if/else statement but that doesn't seem to work either. I know I must be missing something. Here is my code:

const toggler = document.querySelector('.toggler');
const sideBar = document.querySelector('.sidebar')
const links = document.querySelector('.nav-links');
const content = document.querySelector('body')
const menu = document.querySelector('.menu-toggler')

toggler.addEventListener('click', function openSideBar() {
  sideBar.style.width = '200px';
  sideBar.style.transition = ' all 1000ms';
  links.style.left = '70px';
  content.style.marginLeft = '200px';
  content.style.transition = 'all 1000ms';
  menu.style.marginLeft = '150px';
})
<div class="menu">
  <h1>Move It over</h1>
  <div class="menu-toggler">
    <input type="checkbox" class="toggler">
  </div>
  <div class="sidebar">
    <ul class="nav-links">
      <li class="nav-link"><a href="">Home</a></li>
      <li class="nav-link"><a href="">About</a></li>
      <li class="nav-link"><a href="">Services</a></li>
      <li class="nav-link"><a href="">Contact</a></li>
    </ul>
  </div>
</div>

标签： javascriptcss

解决方案

The best approach will be just to add/remove a class on click

Make a class .open and add the properties to it. List all the properties you want to for parent and child class.

.open{
width:200px;
transition :  all 1000ms;
}

.open .nav-link{
left:70px;
}

JS Can be simplified to

const sideBar = document.querySelector('.sidebar')

toggler.addEventListener('click', function openSideBar() {
sideBar.classList.toggle('open');
});

推荐阅读