javascript - 制作汉堡动画的JS问题

Question

我写了这段 JS 代码，它改变了 hamburger menu div 的类，在大多数浏览器上它可以工作，但在一些旧的浏览器上它没有(它不改变类它不会在控制台中给我任何错误)。

JS代码:

var hamburger = document.querySelector("#hamburger"); // hamburger menu
var mtMenu = document.querySelector(".m-t-menu");

hamburger.addEventListener("click", function() {
    if (hamburger.classList == "close") {
        hamburger.classList = "open";
        mtMenu.style.display = "block";
    } else if(hamburger.classList == "open") {
        hamburger.classList = "close";
        mtMenu.style.display = "none";
    }
});

有没有什么不对的地方，或者有没有更好的不用 jQuery 来写的方法？

Answer 1

请尝试使用 contains 方法，它会返回一个 bool 值(即 true 或 false)。

hamburger.addEventListener('click', function(){
  if (hamburger.classList.contains('close'){
    hamburger.className  = 'open'
    mtMenu.style.display = 'block'
  } else if (hamburger.classList.contains('open')){
    hamburger.className  = 'close'
    mtMenu.style.display = 'none'
  }
})

然而，contains 方法可能在旧版浏览器中不可用；我不完全确定。