Javascript:查找页面上的所有元素并添加相同的 CSS

Question

目前正在学习 JavaScript 并尝试创建一个扩展菜单。

我正在尝试查找同一类的所有元素，并在单击时为 NodeList 中的所有元素设置 CSS 值。我在控制台中看到的错误是:

Cannot read property 'style' of undefined 

我知道这与 for 循环没有正确设置变量有关；只是不太确定它是什么。

JSFiddle

http://jsfiddle.net/dXv68/

HTML

<div class="master">

<a href="#" id="btn-nav">
    <span></span>
    <span>Menu</span>
    <span></span>
</a>

<nav id="main-nav">
  <div class="wrapper">
  <div class="background">
  <div class="slice"></div>
  <div class="slice"></div>
  <div class="slice"></div>
  <div class="slice"></div>

  <div class="slice"></div>
  <div class="slice"></div>
  <div class="slice"></div>
  <div class="slice"></div>

  <div class="slice"></div>
  <div class="slice"></div>
  <div class="slice"></div>
  <div class="slice"></div>
</div>
</div>
</nav>

</div><!-- end master -->

CSS

@import url(http://fonts.googleapis.com/css?family=Droid+Sans);


body {
    background: #2980b9;
    font-family: 'Droid Sans', sans-serif;
}


#btn-nav {
    position:absolute;
    left:10px;
    top:10px;
    width:30px;
    height:30px;
    display:block;
        z-index:1;
}

#btn-nav span:nth-child(2) {
    top:10px;
}

#btn-nav span:nth-child(3) {
    top:20px;
}

#btn-nav span {
    height: 4px;
    width: 30px;
    background: white;
    content: "";
    text-indent: -999em;
    display:inline-block;
    position:absolute;
    zoom: 1;
    top:0px;
    left:0px;
    text-align:center;
    -webkit-transition: top .3s cubic-bezier(0.165,.84,.44,1);
        -webkit-transform: rotate(0deg);
}


#btn-nav:hover > span {
    top:10px;
        -webkit-animation: rotateAni .5s 1s forwards; 
}

#btn-nav:hover > span:nth-child(1) {
  -webkit-animation: rotateAni .5s .5s forwards, expandAni .3s .8s forwards;
}

#btn-nav:hover > span:nth-child(2) {
  -webkit-animation: rotateAni .5s .5s forwards, expandAni-2 .3s .8s forwards;
}

#btn-nav:hover > span:nth-child(3) {
  -webkit-animation: rotateAni .5s .5s forwards, expandAni-3 .3s .8s forwards;
}


@-webkit-keyframes rotateAni {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(90deg);}
}

@-webkit-keyframes expandAni {
  0% {left:0;}
  100% {left:-10px;}
}

@-webkit-keyframes expandAni-2 {
  0% {left:0;}
  100% {left:0px;}
}

@-webkit-keyframes expandAni-3 {
  0% {left:0;}
  100% {left:10px;}
}


#main-nav {
  position:fixed;
  left:0;
  top:0;
  display:block;
  width:100%;
  height:100%;
  z-index:-1;
}

#main-nav .wrapper {
  display:table;
  width:100%;
  height:100%;
}

.slice {
  width:25%;
  height:30%;
  float:left;
  background:black;
  opacity:0;
  -webkit-transition: 1s;
}

.background {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:-1;
}

JS

(function () {
    'use strict';

    var menuBtn = document.getElementById('btn-nav');
    var slice = document.querySelectorAll('.slice');

    for(var i = 0; i <= slice.length; i++) {
        var boxes = slice[i];
    }

    menuBtn.addEventListener('click', function() {
        boxes.style.opacity = 1;
    }, false);

}());

Answer 1

您需要将 for 循环放置在事件内部，因为它当前所做的只是设置最后一个切片的不透明度。

var menuBtn = document.getElementById('btn-nav');
var slice = document.querySelectorAll('.slice');

menuBtn.addEventListener('click', function() {
    for(var i = 0; i < slice.length; i++) {
        slice[i].style.opacity = 1;
    }
}, false);