将 JQuery 翻译成 Javascript：汉堡动画答案

【问题标题】：Translating JQuery to Javascript: Hamburger Animation将 JQuery 翻译成 Javascript：汉堡动画
【发布时间】：2021-02-18 21:35:33
【问题描述】：

尝试将此 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 关键字是一个我仍在努力完全理解的概念）。

【问题讨论】：

使用querySelector 而不是querySelectorAll。并且您需要在选择器的开头使用. 来选择一个类。
当你使用getElementById()时，你不要把#放在开头。
您可以使用menuBtn.classList.toggle('open') 代替if 语句。

标签： javascript jquery css toggle

【解决方案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>

【讨论】：