- ベストアンサー
ツリーメニューについて
フレームページで、JavaScriptで文字(下の場合は「親メニュー」)クリックすると 開閉するツリーメニューを使用したいと思っています(フレームあり・なしは訪問者の自由で選べるようにしています)。 http://himajin.moo.jp/menu/menu.html ここや、 http://www.openspc2.org/reibun/javascript/#8 こちらの05・06・63などを参考にして、 自分なりにシンプルに変更してみたのですが、記述に問題点などはありますでしょうか？ 以下が、そのソースです(簡略化しています)。 <html> <head> <script type="text/JavaScript"> <!-- function treeMenu(tName) { tMenu = document.getElementById(tName).style; if(tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } //--> </script> </head> <body> <a href="JavaScript:treeMenu('treeMenu1')">親メニュー</a> <div id="treeMenu1" style="display:none"> <li><a href="a.html" target="main">子メニュー</a></li> <li><a href="b.html" target="main">子メニュー</a></li> </body> </html> また、「document.all」はIE専用だと聞いたので「document.getElementById」 に変更してみたのですが、これでほかのブラウザでも問題は無く使用できますか？ JavaScriptは初めてなのであまり自信がありません。 IEとFirefoxでは動作確認済みです。よろしくお願いします。
- MochaBrown
- お礼率92% (25/27)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
個人的にはliを使うならulの子供で使います。 上にマージンができてしまうのは、margin-top:0px;を しておけばよいでしょう。 あと、スキキライになりますが、こんかいのif条件は 三項演算子を使ったほうがわかりやすいかも・・・。 <html> <head> <script type="text/JavaScript"> <!-- function treeMenu(tName){ tMenu = document.getElementById(tName).style; tMenu.display=(tMenu.display=='none')?"block":"none"; } //--> </script> </head> <body> <a href="JavaScript:treeMenu('treeMenu1')">親メニュー</a> <ul id="treeMenu1" style="display:none;margin-top:0px;"> <li><a href="a.html" target="main">子メニュー</a></li> <li><a href="b.html" target="main">子メニュー</a></li> </ul> </body> </html> （実際に本運用の際はcssを外部化したりしたほうので しょうけど、とりあえずは今回はわかりやすく直接 タグに指定をいれてあります） ちなみに、divにdisplay:noneを直接書きこんでますが このままではjavascriptなしのブラウザでは、子メニューが まったく表示されなくなりますが、よろしいのでしょうか？
その他の回答 (2)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
getElementById は、今頃のブラウザでは大抵使えると思いますが、 使えないブラウザでエラーになってしまうことが心配なら、 if(document.getElementById){//使える } の様にすればいいかもしれません。 また、スクリプトが動作しない環境（getElementByIdが使えない場合も含む）でメニューを開く方法がなくなるということに危惧があるなら、 デフォルトの状態を開いてある状態にして、onload で閉じるような感じにした方がいいのかもしれません。
お礼
getElementByIdが大抵のブラウザで使用できるとのことなので、少し安心しました。 そうですね。if文を使うなどして、エラー回避をするのもいいかもしれません。 メニューは、どうしても開閉できないとダメ、というわけではないので、 もう少し考えてみることにしますね。 回答ありがとうございました。
- VCAT
- ベストアンサー率20% (16/79)
出現するコンテナの<div>タグが閉じてないように見えますが。 それは簡略化の際のケアレスミス？
お礼
回答ありがとうございます。 今回はより参考になった＃2・3の方にポイントを つけさせていただきました。ご了承ください。
補足
すいません、簡略化した際に書き忘れてしまったようです。 実際の(ホームページ用の)ソースには</div>は入っています。 私のとじ忘れでした＾＾； </div>があるものと思って見ていただけると幸いです。 本当に申し訳ありません！
お礼
<li>タグを使用する場合には<ul>も必要だということを失念していました。 『tMenu.display=(tMenu.display=='none')?"block":"none";』 の部分も、とても分かりやすいです。 少し書き足すだけでいいので、やってみますね。 子メニューはどうしても表示させたいわけではないのですが、 (だったらやらなければいいのですが＾＾；)＃２の方も 仰るように、初めから表示させておいて、訪問者の好みで 非表示にさせるという手もありますね。 回答ありがとうございました。とても参考になりました！