- ベストアンサー
プルダウンメニューについて
ジャバスクリプトが全くの初心者です。 プルダウンメニューをつくりたくて http://javascript.eweb-design.com/0701_pdm.html こちらのサイトを参考につくっていますが、 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID.style.visibility = "hidden"; else ID.style.visibility = "visible"; flag = !flag; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown()">メニューを表示する</A><BR> <DIV id="ID" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <BR><BR><BR><BR> </BODY> </HTML> とありますが、 ボタンが二箇所ある場合はジャバスクリプトの部分はどのように書けば良いでしょうか ？ <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown() { if(flag) ID1.style.visibility = "hidden"; else ID1.style.visibility = "visible"; flag = !flag; flag = false; function pullDown() { if(flag) ID2.style.visibility = "hidden"; else ID2.style.visibility = "visible"; flag = !flag; } //--> （ＩＤの部分を変更しています。） こう書いてみましたがダメでした。 とても困っています、どなたか助けてください。よろしくお願いいたします。
- mintmintmi
- お礼率78% (48/61)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
「サイトの参考の仕方」を簡単に説明します。 → Sample 2：プルダウンメニューカスタマイズ版 をクリックし、 http://javascript.eweb-design.com/sample/s0701_2.html を開きます。このページのソースコードを表示します。 メニューの［表示］-［ページのソース］など ------------------------------------------------------------ <HTML> <HEAD> <TITLE></TITLE> <LINK href="http://aeu.jp/cs/style.css" rel="stylesheet" type="text/css"> <SCRIPT language="JavaScript"> <!-- // プルダウンメニュー flag = false; function pullDown01() { if(flag) ID01.style.visibility = "hidden"; else ID01.style.visibility = "visible"; flag = !flag; } function pullDown02() { if(flag) ID02.style.visibility = "hidden"; else ID02.style.visibility = "visible"; flag = !flag; } function pullDown03() { if(flag) ID03.style.visibility = "hidden"; else ID03.style.visibility = "visible"; flag = !flag; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <TABLE border="0" cellspacing="0" cellpadding="0"> <TBODY> <TR> <TD> <DIV style="background-color:#ffcccc; width:160px"> <A href="javaScript:pullDown01()">メニュー１を表示する</a> </DIV> <DIV id="ID01" style="visibility:hidden;background-color:#ffdddd;width:160px"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> </TD> <TD> <DIV style="background-color:#ccffcc; width:160px"> <A href="javaScript:pullDown02()">メニュー２を表示する</a> </DIV> <DIV id="ID02" style="visibility:hidden;background-color:#ddffdd;width:160px"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> </TD> <TD> <DIV style="background-color:#ccccff; width:160px"> <A href="javaScript:pullDown03()">メニュー３を表示する</a> </DIV> <DIV id="ID03" style="visibility:hidden;background-color:#ddddff;width:160px"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> </TD> </TR> </TBODY> </TABLE> <BR><BR><BR><BR> <BR><BR> </BODY> </HTML> ------------------------------------------------------------ が得られます。
その他の回答 (2)
- chanfi
- ベストアンサー率37% (10/27)
プルダウンメニューの作り方は他の方がお答えしているので、 なぜ質問者様のコードだと上手くいかないかを考えてみましょう。 flag = false; １ function pullDown() { ２ if(flag) ID1.style.visibility = "hidden"; else ID1.style.visibility = "visible"; flag = !flag; １ ３ flag = false; １ function pullDown() { ２ if(flag) ID2.style.visibility = "hidden"; else ID2.style.visibility = "visible"; flag = !flag; １ } なぜ正しく動かないか。 １．flag 変数を同じものを使っている 症状：ID1が表示されているときにID2をクリックしても、ID2が表示されない など 解決策例：flag1、flag2を用意する ２．function名が同じで、引数も同じ 症状：片方のプルダウンメニューしか動作しない 解決策例：pullDown1()、pullDown2()などとし、それぞれを呼ぶ ３．pullDown()の}が無い 症状：スクリプトエラー 解決策例：}をつける 一応、この3点を修正すれば正しく動作するはずです。 ３は質問を作成する際のコピーミスかもしれませんが＾＾；
お礼
回答していただきありがとうございます！ そうなんですね、意味を全く理解していなかったため、 とても勉強になりました！ 教えていただきありがとうございました。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 参考サイトとは違いますけど・・・ こんな感じ？ <script type="text/javascript"><!-- // プルダウンメニュー function pullDown(ID) { obj = document.getElementById(ID); obj.style.visibility = obj.style.visibility=="hidden"?"visible":"hidden"; } //--> </script> <A href="javaScript:pullDown('ID1')">メニューを表示する</A><BR> <DIV id="ID1" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <div style="height:100px;"> </div> <A href="javaScript:pullDown('ID2')">メニューを表示する</A><BR> <DIV id="ID2" style="position:absolute;visibility:hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> <A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR> <A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <div style="height:100px;"> </div>
お礼
回答していただきありがとうございます！ 最初の方の方法で表示することができました。 わざわざ、新しい方法を教えていただきありがとうございました。
お礼
回答していただきありがとうございます！！ 教えていただいて意味がわかり、ちゃんと表示することができました。 本当に感謝です。ありがとうございました。