循环通过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

你在for循环中返回for，这就像一个break，

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

你必须在你的函数中返回false。循环的执行也是如此。