触发同一类的两个实例-Javascript

我有一个菜单系统，里面有两个汉堡包菜单。我正在尝试解决如何让JS触发这些菜单图标的两个实例。他们都有相同的课程

我试着添加一个for循环，通过类的实例来循环任何东西，但这似乎不起作用，我现在正在无休止地循环

使用下面的代码，我将《第一个汉堡包人》中三个菜单栏的索引号保持为零[0]，这样你就可以看到当你点击顶部的汉堡包菜单时所产生的效果

我希望这样，当我点击任一汉堡菜单时，两个图标上都会出现条的动画，蓝色框的状态也会改变

任何帮助都将是惊人的

代码笔链接在这里：

代码如下

JAVASCRIPT

var container = document.getElementsByClassName('container')[0],
    bar1 = document.getElementsByClassName('bar1')[0],
    bar2 = document.getElementsByClassName('bar2')[0],
    bar3 = document.getElementsByClassName('bar3')[0],
    box = document.getElementsByClassName('box')[0],
    openMenu = false; // used for toggle

container.onclick = function(){

  if(openMenu === false) {

    bar1.classList.add("bar1_open");
    bar2.classList.add("bar2_open");
    bar3.classList.add("bar3_open");

    box.classList.add("changeBackground");

    openMenu = true;

  } else {

    bar1.classList.remove("bar1_open");
    bar2.classList.remove("bar2_open");
    bar3.classList.remove("bar3_open");

    box.classList.remove("changeBackground");

    openMenu = false;
  }

};

CSS

HTML

单击第一个汉堡包菜单后切换

如果您同意使用JQuery，那么这将非常适合：

HTML（链接到jquery）：

---

我已经改进了您的代码，使其按照您的需要工作。我将变量设置为DOM元素数组，而不是单个元素，并通过它们进行for循环。 编辑：如果你想看的话，这是更新后的代码笔

var container=document.getElementsByClassName（'container'），
bar1=document.GetElementsByCassName（'bar1'），
bar2=document.GetElementsByCassName（'bar2'），
bar3=document.getElementsByCassName（'bar3'），
box=document.getElementsByClassName（'box'）[0]，
openMenu=false；//用于切换
对于（变量i=0；i对于（var j=0；jNo），恐怕我不能用jQuery来完成它。它必须是vanilla JS。
* {padding: 0; margin: 0;}
body {height: 200vh; font-family: arial;}
/* red square */
.container {
  margin: 10px;
  width: 100px;
  height: 100px;
  background: red;
  padding: 0px;
  position: relative;
}

/* properties for all menu bar lines */
.bar {
  position: absolute;
  height: 4px;
  width: 60px;
  background: blue;
  left: 20px;
}

/* 1st menu line */
.bar1 {
  position: absolute;
  top: 28px;
  margin: 0 auto;
  transform-origin: top right;
  transition: transform .5s;
}

/* 2nd menu line */
.bar2 {
  position: absolute;
  top: 48px;
  margin: 0 auto;
  transition: opacity 1s;
}

/* 3rd menu line */
.bar3 {
  position: absolute;
  top: 68px;
  margin: 0 auto;
  transform-origin: right bottom;
  transition: transform .5s;
}

.bar1_open{
  transform-origin: top right;
  transform: rotate(-45deg) translate(-7px, -7px);
  transition: transform .5s .1s ease-out ;
}

.bar2_open {
  opacity: 0;
  transition: opacity .2s ease-in;
}

.bar3_open {
  top: 69px;
  transform-origin: right bottom;
  transform: rotate(45deg)  translate(-7px, 7px);
  transition: transform .5s .1s ease-out;
}

.box {
  padding: 10px;
  width: 200px;
  height: 100px;
  background: blue;
  position: absolute;
  left: 300px;
  top: 30px;
  z-index: 99;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center

}

.changeBackground {
  background: red;
}

<div class="container">
  <div class="bar bar1"></div>
  <div class="bar bar2"></div>
  <div class="bar bar3"></div>
</div>

<!-- second hamburger menu button that currently has no JS  -->
<div class="container">
  <div class="bar bar1"></div>
  <div class="bar bar2"></div>
  <div class="bar bar3"></div>
</div>

<div class="box"> This toggles after 1st hamburger menu is clicked</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

var container = document.getElementsByClassName('container')[0];

console.log(container);
var bar1 = document.getElementsByClassName('bar1')[0],
    bar2 = document.getElementsByClassName('bar2')[0],
    bar3 = document.getElementsByClassName('bar3')[0],
    box = document.getElementsByClassName('box')[0],
    openMenu = false; // used for toggle 

    $(".container").click(function(){

     if(openMenu === false) {

     $(".bar1").addClass("bar1_open");
     $(".bar2").addClass("bar2_open");
     $(".bar3").addClass("bar3_open");

     box.classList.add("changeBackground");

     openMenu = true;

   } else {

     $(".bar1").removeClass("bar1_open");
     $(".bar2").removeClass("bar2_open");
     $(".bar3").removeClass("bar3_open");

     box.classList.remove("changeBackground");

     openMenu = false;
  }

});

var container = document.getElementsByClassName('container'),
    bar1 = document.getElementsByClassName('bar1'),
    bar2 = document.getElementsByClassName('bar2'),
    bar3 = document.getElementsByClassName('bar3'),
    box = document.getElementsByClassName('box')[0],
    openMenu = false; // used for toggle 

for(var i=0; i < container.length; i++){
container[i].onclick = function(){

  if(openMenu === false) {
    for(var j = 0;j<bar1.length;j++){
    bar1[j].classList.add("bar1_open");
    bar2[j].classList.add("bar2_open");
    bar3[j].classList.add("bar3_open");
    }
    box.classList.add("changeBackground");

    openMenu = true;

  } else {
  for(var j = 0;j<bar1.length;j++){
    bar1[j].classList.remove("bar1_open");
    bar2[j].classList.remove("bar2_open");
    bar3[j].classList.remove("bar3_open");
  }
    box.classList.remove("changeBackground");

    openMenu = false;
  }

}
};