JavaScript 切换显示

Question

我正在尝试使用普通 JavaScript 在具有相同类的元素上切换 display: none 和 display: block 。它基本上可以工作，但由于某种原因，你需要单击按钮两次才能工作，这让我很烦恼。下面是代码和 CodePen 的链接。

HTML:

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>

<button onclick="toggle('a')">Toggle A</button>
<button onclick="toggle('b')">Toggle B</button>
<button onclick="toggle('c')">Toggle C</button>
<button onclick="toggle('d')">Toggle D</button>

JS:

function toggle(div) {
  var divs = document.getElementsByClassName(div);

    for(var i = 0; i < divs.length; i++) {
      if(divs[i].style.display === "block") {
        divs[i].style.display="none";
      }
      else {
        divs[i].style.display="block";
      }
    }

}

演示:

CodePen

Answer 1

给div添加样式属性..

<div class="a" style="display:block">a</div>
<div class="b" style="display:block">b</div>
<div class="c" style="display:block">c</div>
<div class="d" style="display:block">d</div>