CSS-转换在JavaScript for循环中不能正常工作

CSS - Transition does not work properly in JavaScript for loop

本文关键字：常工作 工作 不能 转换 JavaScript for 循环 CSS-      更新时间：2024-01-17

我使用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为"selected"的DIV时，我想像jQuery的$.fn.slideDown(...);一样，让所有带有类"accor"的DIV。

如果我稍微更改一下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。

pugazh有其他修复，所以我想发布hear以获得多样性。

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

我用hideDivs[0].className = 'accor';替换了hideDivs[i].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>

相关文章：