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

Question

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

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

使用下面的代码，我将第一个汉堡包人中三个菜单栏的索引号保持在零[0]，以便您可以看到单击顶部汉堡菜单时发生的情况的预期效果。

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

任何帮助都会很棒。

代码笔链接在这里： 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;
}
}
};

Answer 2

如果你同意使用JQuery，这很完美：

HTML(链接到jquery)：

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

Javascript：

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