0
forループを使用して、 "divのグループが同じclassNameを持つ" classNameを変更して、CSS遷移効果を使用して高さの変更によって外観を変更します。しかし問題は最初のdivが影響を及ぼしているだけで、他の人はかなり保つことです。CSSの遷移がforループのjavascriptで正しく機能しない
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のdiv要素をクリックしたとき= '選択'、私はことを願っていますclassNameを持つすべてのdiv： 'accor hide'はjqueryのスライディングダウンのように広がりますが、最初のdivだけがそれを行います。
JavaScriptコードを少し変更すると、2つのdivsが影響します。
function toggleDivs(){
hideDivs = document.getElementsByClassName('accor hide');
hideDivs[0].className = 'accor';
hideDivs = document.getElementsByClassName('accor hide');
hideDivs[0].className = 'accor';
};
は、私はバージョンがループコードのために、I = 0、その最初のdivテイク遷移が影響し、ループが勃発した後、得たことは本当に奇妙であることとします
はJavaScriptを変更しました。
yeahhh、うまくいきます。どうもありがとう。しかし、私は実際に居場所を理解していません。もっと説明できますか？他の人は私にhideDivが変更後に削除されますが、まだそれを持っていないので、hideDivs [i]はtoggleDivs関数のhideDivsになります。 –
'getElementsByClassName'はドキュメントの現在の状態のトラックを保持します。つまり、要素のclassNameを別の値に変更すると、 'hideDivs'はその要素を削除します。 forループをデバッグして自分で試してみてください。 –