JavaScriptを使用してアコーディオンスタイルの左ナビゲーションをまとめていましたが、次のコードがChromeとFirefoxで機能するが、IEでは機能しないという問題が発生しました。
function navClick(clickedDD){
var numDD = document.getElementsByClassName('navDropdown');
var numArrow = document.getElementsByClassName('navUnfolded');
var selectedDD = document.getElementById('dd0' + clickedDD);
var arrow = document.getElementById('arrow0' + clickedDD);
if (selectedDD.style.display == 'none') {
for (var i = numDD.length - 1; i >= 0; i--) {
numDD[i].style.display = 'none';
}
}
if (arrow.className == 'navFolded') {
for (var i = numArrow.length - 1; i >= 0; i--) {
numArrow[i].className = 'navFolded';
}
}
if (selectedDD.style.display == 'none') {
selectedDD.style.display = 'block';
arrow.className = 'navUnfolded';
} else {
selectedDD.style.display = 'none';
arrow.className = 'navFolded';
}
}
何が機能を妨げているのかはわかりませんが、onclickで使用している「this.id」だと思います。
<div id="1" onclick="navClick(this.id);">Content</div>
知っておくと役立つのであれば、私はJavaScriptに比較的慣れていません。基本的に、この関数は、クリックされたdivが表示されているかどうかを最初に確認し、表示されていない場合は、続行する前にすべてのdivに対してdisplayをnoneに設定します。表示されている場合は、次のビットで処理されるため、何も実行されません。矢印の画像が変化するdivの直後にも同様のルールがあります。次に、divが表示されていない場合は、「block」に設定するか、「none」に設定します。これにより、他のメニューdivを開閉せずに1つのメニューdivを開閉できます。
onclick関数によって収集されたIDを使用して、関数の上部にある変数の下部に表示されているように、異なるIDを持つdivを制御しています。おそらく、これはIEが扱いやすくなっているところです。
どんな助けでも大歓迎です。