css转换在for循环javascript中无法正常工作

我使用for循环更改“一组div具有相同的类名”的类名，通过使用css转换影响改变高度来改变外观。但问题是，第一个div开始生效，而其他div保持不变

html:

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';
};

function toggleDivs(){
    hideDivs = document.getElementsByClassName('accor hide');
    hideDivs[0].className = 'accor';
    hideDivs = document.getElementsByClassName('accor hide');
    hideDivs[0].className = 'accor';
};

我假设在i=0之后，带有for循环代码的版本，因此第一个div会产生转换影响，循环会中断，这真的很奇怪。

函数init（）{
var selected=document.getElementById（'selected'）；
selected.onclick=toggleDivs；
};
函数toggleDivs（）{
var menu=document.getElementsByClassName（'accor'）
对于（var i=0；i
hideDivs=document.getElementsByClassName（'accor hide'）

“hideDivs”这里是找到的元素的实时HTMLCollection
。HTML DOM中的HTMLCollection是活动的。它将在基础文档更改时自动更新

因此，当您更新其中一个元素的类名时，它将从变量“hideDivs”中删除。希望这能回答您的问题。
是的，它能工作。非常感谢。但我真的不理解这个情况。您能解释更多吗。其他人给我的答案是，就像刚刚更改hideDivs[i]成为hideDivs[0]在toggleDivs函数中，因为hideDiv将在更改后删除，但我仍然没有得到它。
getElementsByClassName
跟踪文档的当前状态。也就是说，一旦您将元素的类名更改为另一个值，
hideDiv
将删除该元素。请在for循环中调试以自己尝试。
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';
};

function toggleDivs(){
    hideDivs = document.getElementsByClassName('accor hide');
    hideDivs[0].className = 'accor';
    hideDivs = document.getElementsByClassName('accor hide');
    hideDivs[0].className = 'accor';
};