CSS-Transition在JavaScript for循环中无法正常工作
我使用JavaScript for循环来更改具有相同类的一组DIV的CSS-Transition在JavaScript for循环中无法正常工作,javascript,css,css-transitions,Javascript,Css,Css Transitions,我使用JavaScript for循环来更改具有相同类的一组DIV的className属性。 我试图通过更改className属性来更改每个div的外观，以便CSS转换激活并影响每个div。 问题是转换只影响第一个DIV 以下是我的HTML代码： <body onload="init()"> <div id="menu"> <div class="accor hide" id="chosen"> od </div>
className我试图通过更改
className问题是转换只影响第一个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>
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';
}
}
hideDivs = document.getElementsByClassName('accor hide');
hideDivs[0].className = 'accor';
hideDivs = document.getElementsByClassName('accor hide');
hideDivs[0].className = 'accor';
我想这是因为当我使用for循环（上面）时，
I0IhideDivs[I]。className='accor'与hideDivs[0]。类名='accor'
我这样做是因为每次执行toggleDivs（）
类hide
将从元素中删除，您要切换DIV，而不是始终隐藏它们
window.addEventListener（“load”，init，false）；
函数init（）{
var selected=document.getElementById（“selected”）；
selected.onclick=toggleDivs；
}
函数toggleDivs（）{
hideDivs=document.getElementsByClassName（“accor隐藏”）；
对于（var i=0；ipugazh）有其他修复，因此我想发布hear以获得多样性
function toggleDivs() {
var menu = document.getElementsByClassName('accor')
for (var i = 0; i <= menu.length; i++)
menu[i].classList.toggle('hide');
};
函数toggleDivs（）{
var menu=document.getElementsByClassName（'accor'）
对于（var i=0；很抱歉，我已经编辑了init（）的代码将在运行，所以没有在javascript文件中运行它。是的，它工作了。非常感谢，但对我来说仍然很奇怪。你能解释更多吗。为什么要删除隐藏div？@VuHa很简单，你有五个元素带有classhide
，一旦你将它们的一个类更改为其他任何类，那么就只剩下4个元素，所以索引g让我们回到zeroYes。这意味着for循环总是在循环后降低HideDiv值。非常感谢大家。尽可能将HTML、CSS和JavaScript分开，这会使您的代码更易于理解和阅读。例如：您不需要
，而是可以修改您的JavaScript并使用窗口。addEventListener（“load”，init，false）；
function toggleDivs() {
var menu = document.getElementsByClassName('accor')
for (var i = 0; i <= menu.length; i++)
menu[i].classList.toggle('hide');
};