我使用了 JavaScript for 循环来更改一组具有相同类的 DIV 的 className 属性。
我正在尝试通过更改 className 属性来更改每个 div 的外观，以便 CSS 过渡激活并影响每个 DIV。
问题是转换仅影响第一个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 为“chosen”的 DIV 时，我想让所有类为“accor”的 DIV 像 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。
最佳答案
pugazh 有其他修复方法，所以我想发布听到的多样性。
function toggleDivs() {
var menu = document.getElementsByClassName('accor')
for (var i = 0; i <= menu.length; i++)
menu[i].classList.toggle('hide');
};
关于javascript - CSS - 过渡在 JavaScript for 循环中无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36448109/