與JS至極的問題，使漢堡動畫

我寫這段JS代碼，更改類的hamburger menu DIV的，大多數瀏覽器的它工作在一些比較老，但它不（不會更改類和它不會在控制檯中給我任何錯誤）。與JS至極的問題，使漢堡動畫

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的？

來源

2017-08-09 brenno_pellegrini

請注意classList是一個列表，而不是一個字符串。使用ADDD並刪除選項：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList – Randy

感謝我改變它在.className和它的作品 –

代替嘗試使用該方法contains，它返回一個布爾值（即真或假）。

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' 
    } 
})

但是，包含方法可能在舊版瀏覽器中不可用;我不完全確定。

來源

2017-08-09 08:44:14 Anthony

謝謝，我用它來代替.className固定.classList和它的工作 –

@brenno_pellegrini我仍然會使用'contains'方法而不是你正在使用的或正在使用的比較。如果你發現這個答案有用，它不會傷害到投票它<3 – Anthony

與JS至極的問題，使漢堡動畫

回答

相關問題