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

Question

我使用 for 循环更改 "group of divs have same 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 会像 slidedown 一样向下展开的 jquery 但只有第一个 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 transition affect 循环break了，真是奇怪了。

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 找到的元素参考 Here .HTMLCollection HTML DOM 中的一个直播。它会在基础文档更改时自动更新。

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

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

css transition not working properly in for loop javascript

javascript

css

transition