Как изменить JQuery на JS

Question

Я хочу, чтобы преобразовать следующие jquery в javascript какой-либо помощи? заранее спасибо.

$(document).ready(function() {
    $('button.navbar-toggle').click(function () {
      $('div#navbar-collapse').slideToggle("slow");
      return false;
    });

});

Answer 1

Мой подход с использованием CSS-перехода и ванильного JavaScript:

document.querySelector("button.navbar-toggle").addEventListener("click", e => {
  e.preventDefault();
  document.querySelector("#navbar-collapse").classList.toggle("animate");
})

#navbar-collapse{
  background: gold;
  width: 150px;
  height: 300px;
  position:absolute;
  transition: all 0.3s ease;
  margin-left: 0;
}
#navbar-collapse.animate{
  margin-left: -150px;
}

<button class="navbar-toggle">nav toggle</button>
<div id="navbar-collapse">
  test navbar
</div>

Answer 2

Есть два шага:

• Сначала вы можете использовать Document.querySelector () вместо селекторов jQuerys.

• После этого вам нужно написать свою собственную функцию 'slideToggle', потому что это функция jQuery.

  Это может быть сделано, например, путем манипулирования стилями или написания CSS-классов и добавления или удаления их с помощью yourElement.classList.add()/.remove()