Question

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

我尝试添加一个for循环，用类实例循环任何东西，但这似乎不起作用，我现在在无尽的圈子里走了。

使用下面的代码，我将第一个汉堡包中的三个菜单栏的索引号保持为零[0]，这样您就可以看到当您点击顶级汉堡包菜单时所发生的效果。< / p>

我喜欢这样，当我点击任一汉堡菜单时，两个图标上的条形动画都会发生，蓝框的状态会发生变化。

任何帮助都会很棒。

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 Elements数组而不是单个数组，并循环遍历它们。编辑：如果您想查看https://codepen.io/anon/pen/LLBEeQ

，请继续使用更新的codepen

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

{{ d | rejectattr('_id') }}
# <generator object select_or_reject>
{{ d | rejectattr('_id', 'defined') }}
# <generator object select_or_reject>
{{ d | reject('_id', 'defined') }}
# <generator object select_or_reject>

使用Javascript：

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

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

2 个答案: