Question

我使用了一个JavaScript for循环来更改一组具有相同类别的DIV的className属性。
我正在尝试通过更改className属性来更改每个div的外观，以便CSS转换激活并影响每个DIV。
问题是转换 ONLY 会影响第一个DIV。

这是我的HTML代码：

<body onload="init()">
  <div id="menu">
    <div class="accor hide" id="chosen">
      od
    </div>
    <ul>
      <li>To</li>
      <li>Pr</li>
      <li>La</li>
    </ul>
    <div class="accor hide">
      En
    </div>
    <ul>
      <li>fa</li>
      <li>Co</li>
      <li>Co</li>
    </ul>
    <div class="accor hide">
      Sp
    </div>
  </div>
</body>

这是我的CSS：

.accor + ul {
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.5s ease
}
.hide + ul {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.5s ease
}

这是我的JavaScript：

function init() {
  var chosen = document.getElementById("chosen");
  chosen.onclick = toggleDivs;
}

function toggleDivs() {
  hideDivs = document.getElementsByClassName("accor hide");
  for(var i = 0; i <= hideDivs.length; i++) {
    hideDivs[i].className = 'accor';
  }
}

当我点击带有id“已选择”的DIV时，我想让所有DIV与“accor”类滑下来，就像jQuery的$.fn.slideDown(...);一样。

如果我稍微更改了JavaScript，那么过渡将影响前两个DIV。

以下是我更改过的JavaScript：

hideDivs = document.getElementsByClassName('accor hide');
hideDivs[0].className = 'accor';
hideDivs = document.getElementsByClassName('accor hide');
hideDivs[0].className = 'accor';

我认为这是因为当我使用for循环时（上图）i最初设置为0而i没有增加，因此转换仅影响第一个DIV。 / p>

Answer 1

我将hideDivs[i].className = 'accor';替换为hideDivs[0].className = 'accor';
我之所以这样做是因为每次执行toggleDivs();时，都会从元素中删除类hide，您想要切换DIV并不总是隐藏它们。

window.addEventListener("load", init, false);

function init() {
  var chosen = document.getElementById("chosen");
  chosen.onclick = toggleDivs;
}

function toggleDivs() {
  hideDivs = document.getElementsByClassName("accor hide");
  for(var i = 0; i <= hideDivs.length; i++) {
    hideDivs[0].className = 'accor';
  }
}

.accor + ul {
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.5s ease
}

.hide + ul {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.5s ease
}

<body onload="init()">
  <div id="menu">
    <div class="accor hide" id="chosen">
      od
    </div>
    <ul>
      <li>To</li>
      <li>Pr</li>
      <li>La</li>
    </ul>
    <div class="accor hide">
      En
    </div>
    <ul>
      <li>fa</li>
      <li>Co</li>
      <li>Co</li>
    </ul>
    <div class="accor hide">
      Sp
    </div>
  </div>
</body>

Answer 2

pugazh有其他解决办法，所以我想发布听到的多样性。

function toggleDivs() {
  var menu = document.getElementsByClassName('accor')
  for (var i = 0; i <= menu.length; i++)
  menu[i].classList.toggle('hide');
};

CSS - Transition在JavaScript for循环中无法正常工作

2 个答案: