循环通过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。循环执行之后也是如此。