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 code：

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

通过getElementsByClassName循环

1 个答案: