循環通過getElementsByClassName方法

Question

我有這樣的jQuery代碼被觸發移動導航，這是兩個div（左和標識的右側，但標誌是隱藏的）：

$(document).ready(function() { 
    $('.menu').on('click', function(e){ 
    $('.main-nav').toggleClass('active'); 
    e.preventDefault(); 
    }); 
}); 

我嘗試重寫這vannila JS通過這樣的：

document.addEventListener('DOMContentLoaded', function() { 
    var toggleNav = document.getElementsByClassName('main-nav'); 

    function myFunction() { 
    for (var i=0; i<toggleNav.length; i++) { 
     toggleNav[i].classList.toggle('active'); 
     console.log('myFunction() fired...'); 
     return false; 
    } 
    }; 

    var x = document.getElementsByClassName('menu')[0]; 
    x.addEventListener('click', myFunction); 
}); 

但這僅僅只在切換循環中的第一資產淨值，這是left-nav，就像如果我在過去使用var toggleNav = document.getElementsByClassName('main-nav')[0];。什麼地方出了錯？

HTML代碼：

<div class="toggle-mobile-nav"> 
    <a href="#" class="menu">Menu <span>≡</span></a> 
</div> 

<div class="navigation"> 

    <nav class="main-nav left-nav"> 
    ... 
    </nav> 

    <div class="logo logo-nav"> 
    <a href="/"><img class="logo-svg" src="..." alt="" /></a> 
    </div> 

    <nav class="main-nav right-nav"> 
    ... 
    </nav> 

</div> 

Answer 1

您正在返回false內for循環，那會像不大不小的break的，

function myFunction() { 
    for (var i=0; i<toggleNav.length; i++) { 
     toggleNav[i].classList.toggle('active'); 
     console.log('myFunction() fired...'); 
    } 
    return false; 
}; 

你必須在你的函數返回false。循環執行之後也是如此。