JavaScriptによる疑似プルダウンメニューの増やし方が分からない

2008/12/19 14:52

このQ&Aのポイント

他の方が作成したサイトの管理を引き継ぎ更新していますが、サイドメニューに使用されているJavaScriptがわかりません。
現在のサイドメニューは、米、果物、野菜、味噌の項目で構成されており、果物と野菜のサブメニューが存在します。ただし、サブメニューの項目を増やしたい場合に問題が発生しています。
現在のソースコードでは、IDを使用してサブメニューの表示と非表示を切り替えています。ただし、隠したい部分にdivを使用する方法では、FireFoxとSafariでは正常に動作するが、IE7では動作せず、レイアウトも崩れるという問題が発生しています。IEでも正常に動作させるための方法を教えてください。

JavaScriptによる疑似プルダウンメニュー

他の方が作成したサイトの管理を引き継ぎ更新していますが、サイドメニューに使用されているJavaScriptがわかりません。現在のサイドメニューは、以下のようになっています。 ●米 ●果物　○いちご　←初期状態は”display: none”、「果物」クリックで展開 ●野菜　○トマト　←初期状態は”display: none”、「野菜」クリックで展開 ●味噌この小要素を、以下のように増やしたいのです。 ●果物　○いちご　○りんご　以下、数は可変現在の該当部分のソースは、【HTML】 <ul id="menu"> <li><a href="kome.html">米</a></li> <li><a href="#" onclick="kudamonoshow();">果物</a></li> 　<li id="line1" style="display: none;"><a href="kudamono01.html">　いちご</a></li> <li><a href="#" onclick="yasaishow();">野菜</a></li> 　<li id="line2" style="display: none;"><a href="yasai01.html">　トマト</a></li> <li><a href="miso.html">味噌</a></li> </ul> 【JS】 function kudamonoshow() { if (document.getElementById('line1').style.display == 'none') document.getElementById('line1').style.display='block'; else document.getElementById('line1').style.display='none'; } function yasaishow() { if (document.getElementById('line2').style.display == 'none') document.getElementById('line2').style.display='block'; else document.getElementById('line2').style.display='none'; } このソースで何が起きているかは理解しましたが、項目の増やし方が分かりません。 IDはページに一つということなので、試しにHTMLを <li><a href="#" onclick="kudamonoshow();">果物</a></li> <div id="line1" style="display: none;"> 　<li><a href="kudamono01.html">　いちご</a></li> 　<li><a href="kudamono02.html">　りんご</a></li> </div> と、隠したい部分に強引にdivを使いIDを指定したところ、FireFox（Win&Mac）およびSafari（Mac）では正常に動作しますがIE7では動作せず、常に全てのリストが表示されている状態になり、レイアウトも崩れてしまいます。（IE6は現在手元にありません） IEでも動作させるにはどうしたらいいのでしょうか？リストタグを使わない疑似プルダウンのソースは見つけましたが、このサイトでは他にもプログラムが色々動いているので、できれば変更は最小限にしたいと考えています。足りない情報がありましたら追加します。よろしくお願いします。