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

Question

我有一个菜单系统，其中有两个汉堡菜单。我正在尝试弄清楚如何让 JS 触发这些菜单图标的两个实例。他们都有相同的类(class)。

我尝试添加一个 for 循环，以循环遍历类实例的任何内容，但这似乎不起作用，我现在正在无休止地循环。

通过下面的代码，我将第一个汉堡包中三个菜单栏的索引号保留为零[0]，以便您可以看到单击顶部汉堡包菜单时所发生的预期效果。

我希望这样当我单击任一汉堡菜单时，两个图标上都会出现条形动画，并且蓝色框的状态会发生变化。

任何帮助都会很棒。

Codepen 链接在这里:https://codepen.io/emilychews/pen/jwwVam

代码如下。

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

* {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;
}

HTML

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

Answer 1

我已经改进了你的代码，使其能够按照你想要的方式工作，我将变量设置为 DOM 元素数组而不是单个元素，并通过它们进行循环。 编辑:如果您想看一下，这里是更新的代码笔 https://codepen.io/anon/pen/LLBEeQ

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;
  }

}
};