CSS - ループのJavaScriptでトランジションが正しく機能しない

同じクラスを持つDIVのグループのclassNameプロパティを変更するためにJavaScript forループを使用しました。
classNameプロパティを変更して各divの外観を変更しようとしています。その結果、CSSの移行がアクティブになり、各DIVに影響します。
問題は、遷移のみがが最初のDIVに影響することです。ここでCSS - ループのJavaScriptでトランジションが正しく機能しない

は私のHTMLコードです：ここで

<body onload="init()"> 
    <div id="menu"> 
    <div class="accor hide" id="chosen"> 
     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をクリックすると、 "選択"私は、クラス "accor"を持つすべてのDIVをjQueryのようにスライドさせたいと思っています$.fn.slideDown(...);。

JavaScriptを少し変更すると、最初の2つのDIVにトランジションが適用されます。ここで

は私に変更するJavaScriptです：私はループのために使用された場合（上記）iが最初0とiに設定したためであると考え

hideDivs = document.getElementsByClassName('accor hide'); 
hideDivs[0].className = 'accor'; 
hideDivs = document.getElementsByClassName('accor hide'); 
hideDivs[0].className = 'accor';

は、遷移が最初のDIVをもたらしたので、増加しませんでした。毎回あなたがクラスhideを要素から削除されtoggleDivs();を実行するため

出典

2016-04-06 Vu Ha

可能であれば、HTML、CSS、JavaScriptを分けて、コードを理解して読みやすくしてください。 EG：あなたはJavaScriptを変更して 'window.addEventListener（" load "、init、false）;' –

。

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

出典

2016-04-06 10:53:34

は私がこれをしなかったhideDivs[0].className = 'accor';
でhideDivs[i].className = 'accor';を交換し、あなたは常にそれらを隠すいないDIVを切り替えたいです。私は多様性のために聞くを投稿したいので、他の修正を持ってpugazh

window.addEventListener("load", init, false); 
 

 
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[0].className = 'accor'; 
 
    } 
 
}

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

出典

2016-04-06 10:26:27 Akshay

を使用する代わりに ''は必要ありません申し訳ありませんが、私は編集しましたinit（）はで実行するコードなので、javascriptファイルで実行しませんでした。 –

うん、それは動作します。大変ありがとうございますが、それでも私にとっては変です。あなたはもっと説明できますか？ hide divが削除される理由 –

@VuHa単純に言えば、クラスの1つを他のクラスに変更すると、クラス「hide」を持つ5つの要素があり、インデックスがゼロに戻るように4つの要素しか残らないということです。 – Akshay

CSS - ループのJavaScriptでトランジションが正しく機能しない

答えて

関連する問題