• 締切済み
  • すぐに回答を!

プルダウンメニューをmouseoutで閉じる

mouseoutで閉じるようにしたいのですが、可能でしょうか。 <SCRIPT language="JavaScript"> <!-- flag = false; function pullDown() { if(flag) smenu.style.visibility = "hidden"; else smenu.style.visibility = "visible"; flag = !flag; } //--> </SCRIPT>

共感・応援の気持ちを伝えよう!

  • 回答数2
  • 閲覧数484
  • ありがとう数0

みんなの回答

  • 回答No.2

<body> <div id="hoge">あああああああああああああああああああ</div> <script type="text/javascript"> var hoge = document.getElementById('hoge'); flag = false; function pullDown() { console.debug( 1 ); if( flag ) { smenu.style.visibility = "hidden"; } else { smenu.style.visibility = "visible"; } flag = !flag; } hoge.addEventListener( 'mouseout', pullDown, false ); </script> </body> ---------------------------------------- 「閉じる」という部分の処理内容の説明がないので、 わかりませんが、 mouseoutのイベントを書いてみました。 ご参考程度にどうぞ。(あ、addEventListenerに対応してないie系だと動きません。)

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • プルダウンメニューについて

    ジャバスクリプトが全くの初心者です。 プルダウンメニューをつくりたくて 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; } //--> (IDの部分を変更しています。) こう書いてみましたがダメでした。 とても困っています、どなたか助けてください。よろしくお願いいたします。

  • プルダウンメニュ 展開時にずらす方法

    以下の設定をおこなった際に「プルダウン1」で表示される「■メニュ1」と「■メニュ2」が「プルダウン2」に重ならないように「プルダウン2」が自動的に下がり、「プルダウン1」を閉じると元の位置に戻るような設定はないでしょうか? 宜しくお願いいたします。 function pullDown1() { if(flag) ID1.style.visibility = "hidden"; else ID1.style.visibility = "visible"; flag = !flag; } function pullDown2() { if(flag) ID2.style.visibility = "hidden"; else ID2.style.visibility = "visible"; flag = !flag; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff"> <A href="javaScript:pullDown1()">プルダウン1</A><BR> <DIV id="ID1" style="position:absolute;visibility:hidden;"> <A href="xxxx">■メニュ1</A><BR> <A href="xxxx">■メニュ2</A><BR> <!-- ==================== --> <A href="javaScript:pullDown2()">プルダウン2</A><BR> <DIV id="ID2" style="position:absolute;visibility:hidden;"> <A href="xxxx">■メニュ3</A><BR> <A href="xxxx">■メニュ4</A><BR>

  • プルダウンメニューについてです。

    プルダウンメニューについてです。 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> 説明がうまくできないのですが、、”メニューを表示する”をクリックしたときにドロップダウンメニューを開くと同時にページを開きたいと思っています。(”メニューを表示する”のページを作りたい。) どうしたらよいでしょうか?よろしくお願いします。

  • 回答No.1
  • SAYKA
  • ベストアンサー率34% (944/2776)

mouseOutイベント検知でできるんじゃないかな http://www.tohoho-web.com/js/event.htm#fromElement

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • JavaScriptがfirefoxで作動しない

    IEでは正しく作動するjavascriptがfirefoxではうまく作動しません。なぜなのかどなたか教えてください・・・・! <script type="text/JavaScript"> flag = false; function pd1() { if(flag) ID1.style.visibility = "hidden"; else ID1.style.visibility = "visible"; flag = !flag; } </script> ここからhtml <div id= "w1"><a href="javascript:pd1()" >テキスト</a></div> <div id="ID1" style="visibility: hidden;"> <p>テキスト</p></div> 以上です。まだまだ超初心者です。よろしくお願いいたします。

  • カテゴリをクリックして、リンク先一覧を表示させたい

    テーブル内のカテゴリをクリックすると、別テーブルにリンク先一覧を表示させるような、リンクページを作りたいのですが、下記のように組むと、 「リンク1」をクリック→別テーブルにちゃんとリンク先一覧が表示される。 次に「リンク2」をクリックすると「リンク1」のリンク先一覧の下に「リンク2」のリンク先一覧も表示されてしまう。 しかも2回クリックしないと表示されません(泣 「リンク2」をクリックしたら「リンク1」で表示させたリンク先一覧と入れ替えで、リンク先を表示させたいのですが、やり方が分かる方いらしたら、ご教授お願いします。 <HEAD> <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; } //--> </SCRIPT> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD><A href="javaScript:pullDown01()">リンク1</a><BR> <BR> <A href="javaScript:pullDown02()">リンク2</a><BR> </TD> <TD style="width:380px;height:190px"> <DIV id="ID01" style="visibility: hidden;"> <A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR> </DIV> <DIV id="ID02" style="visibility: hidden;"> <A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR> </DIV> </TD> </TR> </TBODY> </TABLE> </BODY>

  • プルダウンとチェックボックスの連動

    はじめましてよろしくおねがいします。 やりたいことはプルダウンのメニューの中身を活性したり非活性に したいのですが、どのようにやるのか想像がつきません。 以下にソースを貼り付けました。 チェックボックスにチェックされた場合はメニューの中身の■Yahoo!をリンクさせない様にしたいです。 チェックが外れたときはメニューの中身はすべてリンクで表示します。 現状はすべてリンクしかできていないです。 チェックボックスとの連動の方法、メニューの中の非活性の方法を教えてください。よろしくおねがいします。 <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://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR> </DIV> <BR><BR><BR><BR><BR><BR> <FORM> <INPUT TYPE ="checkbox">ここにチェックを入れるとプルダウンの■Yahoo!のみ非活性にしたい。 </FORM> </BODY> </HTML>

  • 6/10にお尋ねしましたマウスを重ねると横に画像がですスクリプトについて再度

    わかりやすく教えていただいたのですが、画像のURLを入力する個所がわからなくなってごちゃごちゃになってしまったのです。もうしわけありません、今一度URLをどこに入れたらよいのか教えていただければ幸いです。 お手数おかけいたします。 '********** ココから ********** <script language="javascript"> <!-- function changeVis(obj, visible) { document.all(obj).style.visibility=(visible?"visible":"hidden") } //--> </script> <A HREF="#" onMouseMove="changeVis('image', true)" onMouseOut="changeVis('image', false)">アイコン(hogehoge)</A> <IMG SRC="hogehoge.gif" STYLE='visibility:hidden' id='image'></DIV> '********** ココまで **********

    • ベストアンサー
    • HTML
  • ドロップダウンリストの高さを、非表示のときは上に詰

    初心者です。本当に初歩な質問で申し訳ありません。 ドロップダウンリストを作り、クリックしたときにサブメニューを表示したいのですが、 表示、非表示は切り替えられても、非表示のときに空欄ができてしまいます。 これを、非表示のときは上に詰めて表示するようにしたいのですが、その方法を 教えてください。 下記がそのソースになります。 <SCRIPT language="JavaScript"> <!-- function pullDown1(ss) { for(d0 = 0 ; d0 < ID.length ; d0 ++) { ID[d0].style.visibility = "hidden"; } ID[ss].style.visibility = "visible"; } //--> </SCRIPT> </HEAD> <BODY> <ol> <li><A href="javaScript:pullDown1(0)">メニューを表示する</A> <DIV id="ID" style="visibility:hidden;"> <ul> <li><A href="">A</A></li> <li><A href="">B</A></li> <li><A href="">C</A></li> <li><A href="">D</A></li> </ul> </DIV> </li> <li><A href="javaScript:pullDown1(1)">メニューを表示する</A> <DIV id="ID" style="visibility:hidden;"> <ul> <li><A href="">a</A></li> <li><A href="">b</A></li> <li><A href="">c</A></li> <li><A href="">d</A></li> </ul> </DIV> </li> </ol> </BODY> 以上、よろしくお願いいたします。

  • スクリプトの入れ方で教えて下さい

    文字(例:あいうえお)にマウスを重ねると画像が表示されるスクリプトを以下のように書き込みました。 一箇所はこの通りで正常にできたのですが、同じページ内に数箇所同じスクリプトを有効にさせるためにはどうしたらよいのでしょうか? また、以下のスクリプトの場合で画像が表示される位置を指定したいのですが 可能でしょうか?(右側に表示・・・等) よろしくお願いいたします。 <script language="javascript"> <!-- function changeVis(obj, visible) { document.all(obj).style.visibility=(visible?"visible":"hidden") } //--> </script> <P align="center"><FONT size="2"> <A HREF="#" onMouseMove="changeVis('image', true)" onMouseOut="changeVis('image', false)">あいうえお</A> </F></P> <IMG SRC="画像.gif" STYLE='visibility:hidden' id='image'></DIV>

  • JavaScriptについて

    現在、ホームページにてJavascriptのツリーメニューをつくっています。 ここでメニューA・B・Cがあるとします。 メニューAが開いているときにメニューBを押したらメニューAを閉じるようにしたいのです、どうすればいいか分かりません。 現在の状態はこれです。 <SCRIPT language="JavaScript"> <!-- // ツリーメニュー flag = false; function treeMenu(tName) { tMenu = document.all[tName].style; if(tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } //--> </SCRIPT>

  • IFRAMEの表示/非表示を切り替えたい

    こんにちは。初歩的な質問ですが、タイトルの件についてです。 JavaScriptを使ってIFRAMEの表示/非表示を切り替えたいのですが、早速つまづいてしまいました。 以下がソースです。(JavaScript呼び出し部分は省略します。) ■IFRAME部分■ <iframe src="test.html" style=" visibility:visible;" name="test"> </iframe> ■JavaScript部分■ <SCRIPT Language="JavaScript"> <!-- function test() { window.document.test.style.visibility = hidden; } // --> </SCRIPT> よろしくお願いします。

  • マウスオーバーのプルダウンメニューについて

    すみません。まったくのしろうとです。教えてください。 会社のWebサイトをリニューアルしようとしていますが、メニューを折りたたみにしたいと考えています。ネットでmouseoverというJavaスクリプトでできるということまでは突き止めました。そしてサンプルも見つけたのですが、やりたいことと合致しなくて困っています。 <script language="JavaScript"><!-- vType = ["hidden","visible"]; function pdMenu(mName) { Menu = document.all[mName].style; Menu.visibility = vType[Menu.visibility.indexOf("hidden") + 1]; } // --></script> </head> <body> <IMG src="newimg/AdAge.gif" onmouseover="pdMenu('Menu1')"><br> <div id="Menu1" style="visibility:hidden" onMouseout="pdMenu('Menu1')"> <a href="http://www.openspc2.org/" >わっ!</a><br> <a href="http://www.impress.co.jp/">ぎゃっ!</a><br> <a href="http://game.gr.jp/" >しょえ~!</a><br> </div> </body> このスクリプトでは、newimg/AdAge.gifという画像の上にマウスをかざすと、言葉がプルダウンで出てきます。わたしがやりたいのは、この画像を単なるテキストに変えることです。HTMLエディタ上でイロイロやってみましたが、うまくいきません。この部分をテキストに変える方法を教えていただけないでしょうか? どうかよろしくお願いします。

  • これは何をするスクリプトですか?

    <head> <script type="text/javascript"> <!-- function loading() { if (document.getElementById){ document.getElementById('load').style.visibility = 'hidden'; } else { if (document.layers){ document.layers['load'].visibility = 'hidden'; } else { document.all('load').style.visibility = 'hidden'; }}} // --> </script> </head> <body onload="loading()"> 詳細は略して書いています。 プログラムに全く詳しくないので、何をやろうとしているスクリプトなのかわかりません。 皆様には簡単かとは思いますが、よろしくお願いします。