Question

我使用for循环来改变＆＃34的className; div组具有相同的className＆＃34;用css过渡效应改变高度来改变外观。但问题只是第一次影响而其他人保持相当。

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 =＆＃39;选择＆＃39;的div时，我希望所有带有className的div：＆＃39; accor hide＆＃39;将像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采用过渡影响而循环爆发，这真的很奇怪。

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（＆＃39; accor hide＆＃39;）;

＆＃34; hideDivs＆＃34;这里是找到的元素的实时HTMLCollection参考Here .HTML DOM中的HTMLCollection是实时的。当基础文档发生变化时，它会自动更新。

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

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

2 个答案: