- 締切済み
メニューのツリー化でfirefoxｓでjavascriptが動作しません。
メニューのツリー化をしようと思い、以下のサンプルを使用しました。 IEでは問題なく動くのですが、Firefoxでは動作しません。恐らくネットスケープでも動作しないと思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>クリックするとツリーメニューを表示する（１つだけ展開し後はたたむ）</title> <script Language="JavaScript"><!-- trList = ["treeMenu1","treeMenu2","treeMenu3"]; // ツリーメニューのリスト function exMenu(tName) { for (i=0; i<trList.length; i++) eval(trList[i]).style.display = "none"; tMenu = eval(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --></script> </head> <body bgcolor="white"> <a href="javaScript:exMenu('treeMenu1')">＋</a>■検索サイト１<br> <div id="treeMenu1" style="display:none"> ├<a href="">Yahoo!</a><br> ├<a href="" >Goo</a><br> └<a href="">Lycos</a><br> </div> <a href="javaScript:exMenu('treeMenu2')">＋</a>■検索サイト２<br> <div id="treeMenu2" style="display:none"> ├<a href="">Infoseek</a><br> ├<a href="" >Google</a><br> └<a href="">Kids Goo</a><br> </div> <a href="javaScript:exMenu('treeMenu3')">＋</a>■検索サイト３<br> <div id="treeMenu3" style="display:none"> ├<a href="">Excite</a><br> └<a href="" >MSN</a><br> </div> </body> </html> 1行目の<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> を消去して、<html>から書き始めれば、firefoxでも動くのですが、DOCTYPE宣言をしていても動くようにしたいと思います。 どなたかアドバイスをよろしくお願いいたします。
- dream_cats
- お礼率68% (26/38)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- leap_day
- ベストアンサー率60% (338/561)
こんにちは onmouseover,onmouseoutを使用するときは微妙なタッチがありますからね～（予想しないところでonmouseoutが効いたりするので気をつけてくださいね） 下の場合だとサイト2からサイト３に下がるときにサイト3は開けないっといった具合に・・・（一応開くけどサイト2のonmouseoutの場所とサイト3のonmouseoutの場所が被っているので） 一応基本的には↓な感じになるとは思いますけど注意しないといけないのはこの場合には<div>にwidth設定しないといけないことですかね とりあえずwidthつけてないですけど右側の何もない空白の場所を触ってもonmouseoverとかしちゃいますから（<div>はデフォルトで100％表示ですから） <script type="text/javascript"><!-- function exMenu(tName) { document.getElementById(tName).style.display = "block"; } function exitMenu(tName) { document.getElementById(tName).style.display = "none"; } //--></script> <div onMouseover="exMenu('treeMenu1')" onMouseout="exitMenu('treeMenu1')">＋■検索サイト１ <div id="treeMenu1" style="display:none" > ├<a href="">Yahoo!</a><br> ├<a href="" >Goo</a><br> └<a href="">Lycos</a><br> </div></div> <div onMouseover="exMenu('treeMenu2')" onMouseout="exitMenu('treeMenu2')">＋■検索サイト2 <div id="treeMenu2" style="display:none"> ├<a href="">Infoseek</a><br> ├<a href="" >Google</a><br> └<a href="">Kids Goo</a><br> </div></div> <div onMouseover="exMenu('treeMenu3')" onMouseout="exitMenu('treeMenu3')">＋■検索サイト3 <div id="treeMenu3" style="display:none"> ├<a href="">Excite</a><br> └<a href="" >MSN</a><br> </div></div>
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 動くだけでいいのであれば <script Language="JavaScript"><!-- trList = ["treeMenu1","treeMenu2","treeMenu3"]; // ツリーメニューのリスト function exMenu(tName) { for (i=0; i<trList.length; i++) { if(tName != trList[i])document.getElementById(trList[i]).style.display = "none"; } tMenu = document.getElementById(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --></script> にすればできますよ 一応開いたものをクリックすれば閉じれるようにもしておきました（元のでは1行目でdisplay:none;にしているので開いているものは閉じれませんので・・・）
補足
早速の回答ありがとうございました。 おまけにクリックで閉じるようにしていただいて、本当に感激です。 ありがとうございました。 こちらのメニューで、クリックではなく、マウスオーバーでメニューが展開して、マウスアウトでメニューが閉じるということをしようと思うのですが、この動作もJavaSprictでできるのでしょうか？ JavaSprictというものをほとんどわかっていないのですけど、今マウスオーバーで展開させようとしていたのですが、見当がつきません。 ついでの質問で申し訳ないのですが、差し支えなければ教えてください。よろしくお願いいたします。
お礼
ありがとうございます。 leap_dayさんのおっしゃるように、2を開いていて、3を開くとき２が閉じて3が上に上がるので、マウスアウトになってしまって、思うように動いてくれないですね。 2から3に行く最後のところだけ何か対策をほどこさないといけないようですね。また明日ゆっくり考えてみます。 ご親切に考えてくださり本当にありがとうございました。 とても感謝しております。