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

Question

我使用for循环来更改“ div组具有相同的className”的className，以通过使用CSS过渡效果改变高度来改变外观。 但是问题只是第一个div产生了影响，而其他的保持了相当的效果。

的HTML：

<body onload='init()'>
    <div id="menu">
    <div id="chosen" class="accor hide">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时，我希望所有className：'accor hide'的div都将像jquery的slidedown一样散开，但只有第一个div会这样做。

如果我更改一点JavaScript代码，它将在2个divs生效的情况下完成。

更改了javascript：

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

我想在i = 0之后使用for循环代码的版本，所以第一个div会产生过渡效果，并且循环会中断，这真的很奇怪。

Answer 1

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

 .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 id="chosen" class="accor hide">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

hideDivs = document.getElementsByClassName（'accor hide'）;

“ hideDivs”是找到的元素的实时HTMLCollection，请参见此处。HTMLDOM中的HTMLCollection是实时的。 更改基础文档后，它将自动更新。

因此，当您更新元素之一的类名时，它将从变量“ hideDivs”中删除。 希望这能回答您的问题。

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-04-06 10:38:08

解决方案2
0 2016-04-06 12:49:44

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-04-06 10:38:08

解决方案2 0 2016-04-06 12:49:44

解决方案1
0 已采纳 2016-04-06 10:38:08

解决方案2
0 2016-04-06 12:49:44