将 JQuery 翻译成 Javascript：汉堡包动画

Question

正在尝试将此 JQuery 重写为 Javascript 以用于汉堡包动画。

 <div class="hamburgerLines" id="nav-icon">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

#nav-icon{
  width: 60px;
  height: 45px;
  position: relative;
  margin: 50px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #ed1250;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}


#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
  top: 18px;
}

#nav-icon span:nth-child(4) {
  top: 36px;
}

#nav-icon.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

$(document).ready(function(){
    $('#nav-icon').click(function(){
        $(this).toggleClass('open');
    });
});

到目前为止我想出的是：

const menuBtn = document.querySelectorAll('hamburgerLines');
let menuOpen = false;

menuBtn.addEventListener('click',()=>{
  if(!menuOpen){
    menuBtn.classList.add('open');
    menuOpen = true;
  }else{
    menuBtn.classList.remove('open');
    menuOpen = false;
  }
})

但这不起作用。如果我改用 getElementByID('#nav-icon'); 它也不起作用。我是否需要创建一个循环来遍历所有跨度项？我没有考虑关键字 this 吗？（对 JS 还是有点陌生，this 关键字是一个我仍在努力完全理解的概念）。

Answer 1

单词this引用了当前对象。

例如：

<button onclick="btnClick(this)">test</button>
<script>
    function btnClick(button)
    {
        alert(button.innerText)
    }
</script>

const menuBtn = document.getElementById('nav-icon');
menuBtn.addEventListener("click", function(){ 
  if(!menuBtn.classList.contains("open")){
    menuBtn.classList.add('open');
  }else{
    menuBtn.classList.remove('open');
  }
});

#nav-icon{
  width: 60px;
  height: 45px;
  position: relative;
  margin: 50px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon span {
  display: block;
  position: absolute;
  height: 9px;
  width: 100%;
  background: #ed1250;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}


#nav-icon span:nth-child(1) {
  top: 0px;
}

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
  top: 18px;
}

#nav-icon span:nth-child(4) {
  top: 36px;
}

#nav-icon.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

<div class="hamburgerLines" id="nav-icon">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

将 JQuery 翻译成 Javascript：汉堡包动画

Translating JQuery to Javascript: Hamburger Animation

javascript

css

jquery

toggle