- ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：JavaScriptで折りたたみメニュー）
JavaScriptで折りたたみメニューを作成する方法
このQ&Aのポイント
- JavaScriptを利用して折りたたみメニューを作成する方法について解説します。
- 折りたたみメニューには2つの項目と下層メニューがあり、クリックすることで下層メニューの表示/非表示を切り替えることができます。
- 一方の項目をクリックした際には、他方の項目の下層メニューが閉じる仕様となっています。
- hellodime
- お礼率88% (8/9)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
同時に他のメニューをdisplay:noneにすればよいだけでは？ とりあえず、ご質問の構成（ul-li-ul-li）でメニューが作成されているとするなら、 一番外側のulにid="tree"を追加して以下のようでは？ <html> <head> <script> function exMenu(tName){ var t=document.getElementById('tree').getElementsByTagName('ul'); for (var i=0; i<t.length; i++){ if (t[i].id==tName){ t[i].style.display=(t[i].style.display=='none')?'block':'none'; } else{ t[i].style.display='none'; } } } </script> </head> <body> <ul id="tree"> <li><a href="javascript:exMenu('treeMenu1')">項目1</a> <ul id="treeMenu1" style="display:none"> <li><a href="#">項目1-1</a></li> <li><a href="#">項目1-2</a></li> <li><a href="#">項目1-3</a></li> </ul> </li> </ul> </body> </html>
お礼
回答ありがとうございます。 さっそく試してみたら、問題なく思い通りに動きました！ JavaScriptについて、ほとんど知識が無かったので、大変たすかりました。 ありがとうございました。