JavaScriptで折りたたみメニューを作成する方法

2008/11/06 11:33

このQ&Aのポイント

JavaScriptを利用して折りたたみメニューを作成する方法について解説します。
折りたたみメニューには2つの項目と下層メニューがあり、クリックすることで下層メニューの表示/非表示を切り替えることができます。
一方の項目をクリックした際には、他方の項目の下層メニューが閉じる仕様となっています。

hellodime
お礼率88% (8/9)

JavaScript
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2008/11/06 12:38 回答No.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>

質問者