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

css transition not working properly in for loop javascript

本文关键字：常工作 工作 转换 for 循环 javascript css      更新时间：2024-02-16

我使用for循环来更改"group ofdiv have same className"的className，以通过使用css transition影响高度的更改来更改外观。但问题是第一个div生效，而其他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:"accord-hide"的div都能像jquery的slidedown一样向下展开，但只有第一个div能做到这一点。

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

更改的javascript:

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

我假设for循环代码的版本，在i=0之后，所以第一个div发生转换，循环爆发，这真的很奇怪。

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>

hideDivs=document.getElementsByClassName（'accor-hide'）；

"hideDiv"这里是一个找到的元素的实时HTMLCollection参考这里。HTML DOM中的HTMLCollection是活动的。当基础文档发生更改时，它将自动更新。

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

相关文章：