Закрыть боковую панель с Javascript

Question

Мне нужно закрыть боковую панель с помощью JavaScript. Я пытаюсь использовать следующий код, но когда я нажимаю на иконку, которая выполняет открытие боковой панели, она просто больше не открывается, потому что display: none выполняется немедленно.

Это мой код, с помощью которого я открываю и закрываю боковую панель:

function openNavCategories() { 
    const overlayContent = document.getElementById('overlayContent-categories');

    document.getElementById('nav-categories').style.width = '30%';
    overlayContent.style.display = 'block';
    overlayContent.style.width = '100%';
    document.getElementById('category-icon').style.display = 'none';
    document.getElementById('category-icon-open').style.display = 'block';
}

function closeNavCategories() {
    const navCategories = document.getElementById('nav-categories');
    navCategories.style.width = '0%';
    navCategories.style.transition = 'all 0.4s';
    document.getElementById('overlayContent-categories').style.display = 'none';
}

И этот, с помощью которого я пытаюсь проверить, что щелчок находится за пределами моей боковой панели, но он даже больше не показывает:

window.addEventListener('mouseup', function(event) {
    var SideBar = document.getElementById('nav-categories');
    if(event.target != SideBar && event.target.parentNode != SideBar ) {
        SideBar.style.display = 'none';
    }
})

А это мой HTML и SCSS:

    <a href="#" class="closeBtn-categories" onclick="closeNavCategories()">X</a>

    <div id="overlayContent-categories" class="overlay__content-categories">
        <h2>Categorías</h2>
        <a href="#" onclick="closeNavCategories()">Categoría 1</a>
        <a href="#" onclick="closeNavCategories()">Categoría 2</a>
        <a href="#" onclick="closeNavCategories()">Categoría 3</a>
        <a href="#" onclick="closeNavCategories()">Categoría 4</a>
    </div>
</div>

SCSS:

    .overlay-categories {
      position: fixed;
      top:0;
      right:0; // de derecha
      width: 0%;
      height: 100%;
      background: rgba(0,0,0,.9);
      overflow-x: hidden;
      z-index: 10;
      transition: all 0.8s; 

      h2 {
        color: #506a80;
        margin: .2rem 0 .5rem 0rem;
      }

      a {
        padding: 10px;
        color: #ccc;
        font-size: 1rem;
        text-decoration: none;
        display:block;

        &:hover {
            color: #fff;
        }
      }

      .closeBtn-categories {
          position: absolute;
          top:20px;
          right: 35px;
          font-size: 2rem;
      }

      .overlay__content-categories {
          position: relative;
          display: none;
          top: 10%;
          width: 0%;
          text-align: center;
          margin-top: 20px;
          transition: all 2s linear;  
      }

  }

Вы можете мне помочь? Спасибо.

Answer 1

Вы можете определить класс css для открытого / закрытого стиля, а не манипулировать атрибутом стиля во время выполнения скрипта.Это позволяет вам сохранить все стили в одном месте в SCSS.

  /* defined nav-categories__closed class*/
  #nav-categories{
    width: 30%;
    .overlayContent-categories{
      display: block;
      width: 100%;
    }
  }

  #nav-categories.nav-categories__closed{
    width: 0%;
    transition: all 0.4s;

    .overlayContent-categories{
      display: none;
    }
  }

Изменить openNavCategories() и closeNavCategories(), чтобы переключать только nav-categories__closed

function openNavCategories() {
  const navCategories = document.getElementById('nav-categories');
  navCategories.classList.toggle('nav-categories__closed', false);

}

function closeNavCategories() {
  const navCategories = document.getElementById('nav-categories');
  navCategories.classList.toggle('nav-categories__closed', true);
}

У вас есть третийФункция, чтобы закрыть боковую панель, когда щелчок выполняется за пределами боковой панели.Вам может потребоваться изменить функцию, чтобы включить ее в проверку: Если цель события также не является элементом управления для открытия боковой панели, тогда вызовите closeNavCategories().Цель closeNavCategories() и основная часть события mouseup более или менее выполняют ту же работу: закрыть боковую панель.Вы можете устранить повторяющийся код, ссылаясь на ту же функцию.

Пример: https://jsfiddle.net/rgfbLyon/5/