javascriptの質問です。表示が残ってしまう

このQ&Aのポイント
  • javascriptを使用してオンマウスでサブメニューを表示する機能を組んでいますが、Firefox、Safari、Operaで特定の行動をするとサブメニューが残ったままになってしまいます。IEでは問題は発生しません。
  • 具体的には、オンマウスでサブメニューを開き、サブメニューのリンクをクリックした後にブラウザの戻るボタンで元の画面に戻ると、サブメニューが表示されたままになってしまいます。
  • OSはXPを使用しています。原因が分からず困っています。アドバイスをお願いします。
回答を見る
  • ベストアンサー

javascriptの質問です。表示が残ってしまう

オンマウスでサブメニューを出すjavascriptを組んでいます。 Firefox、Safari、Operaで次の行動を起こすとサブメニューが残ったままになります。 IEだと特に問題は有りませんでした。 OSはXPです。 ・オンマウスでサブメニューが開く ・サブメニューのリンクをクリックし、マウスは動かさずサブメニューが表示されたまま次のページへ ・ブラウザの戻るで元の画面に戻る ・サブメニューが残ったままになっている 原因が分かりません。アドバイスお願いします。 ソース <style type="text/css"> .mainmenu{ visibility : visible; width:200px; position : relative; z-index: auto; } .submenu{ visibility : hidden; width : 200px; top : -10px; left : 100px; position : absolute; background-color:#FFF; padding:10px; border:1px solid #CCCCCC; z-index: 1; line-height:1.5em; } </style> <SCRIPT language="JavaScript"> <!-- function showMenu(ss){ var getStyle = document.getElementById(ss); getStyle.style.visibility = "visible" } function hiddenMenu(tt){ var getsStyle = document.getElementById(tt); getsStyle.style.visibility = "hidden" } //--> </SCRIPT> <div class="mainmenu" onmouseover="showMenu('treeMenu1')" onmouseout="hiddenMenu('treeMenu1')"> <a href="URL1">■ <strong>メインメニュー1</strong></a> <div class="submenu" id="treeMenu1"> <div><a href="URL1-1">サブメニュー1</a></div> <div><a href="URL1-2">サブメニュー2</a></div> <div><a href="URL1-3">サブメニュー3</a></div> </div> </div>

質問者が選んだベストアンサー

  • ベストアンサー
  • yamada_g
  • ベストアンサー率68% (258/374)
回答No.1

現象の原因まで分かりませんが、onunloadイベントでhiddenMenu()を実行してはどうでしょうか。

shimayu
質問者

お礼

お礼がだいぶ遅くなりましたがありがとうございます。 onloadは既に試しましたがダメなようです。

その他の回答 (1)

  • yamada_g
  • ベストアンサー率68% (258/374)
回答No.2

>onloadは既に試しましたがダメなようです。 私はonunloadと書いていますが?

shimayu
質問者

お礼

すみません間違えていたようです。 しかしonunloadでもうまく行きませんでした。 これ以上回答が出なそうなので一旦締め切ります。 有難う御座いました。

関連するQ&A

  • プルダウンメニューがうまくいかない

    スタイルシート・スタンダード・デザインガイドと言う本を参考にプルダウンメニューを作っていますがうまくいきません。 サブメニューをメインメニューの真横にだすにはどうすればいいでしょう。 ■HTML■ <a href="index.html"><img src="images/home.gif" width="13" height="14">トップページ</a> <span>|</span> <a href="instruction.html"><img src="images/instruction.gif" width="14" height="13">注意事項</a> <span>|</span> <div id="menu1" onMouseOver="MenuOn(1)" onMouseOut="MenuOff(1)"> <a href="event/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">お知らせお知らせ</a> <div class="submenu" id="submenu1"> <a href="event/index.html"><img src="images/submenu.gif" width="8" height="12">イベント1</a> <span>|</span> <a href="event/2.html"><img src="images/submenu.gif" width="8" height="12">イベント2</a> <span>|</span> <a href="event/3.html"><img src="images/submenu.gif" width="8" height="12">イベント3</a> </div> </div> <span>|</span> <a href="aaaaaaaa.html"><img src="images/menu.gif" width="8" height="12">ああああああああ</a> <span>|</span> <div id="menu2" onMouseOver="MenuOn(2)" onMouseOut="MenuOff(2)"> <a href="mainmenu1/index.html" class="menuhead"><img src="images/menu.gif" width="8" height="12">メインメニュ1</a> <div class="submenu" id="submenu2"> <a href="mainmenu1/index.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ1</a> <span>|</span> <a href="mainmenu1/submenu2.html"><img src="images/submenu.gif" width="8" height="12">さぶめにゅ2</a> <span>|</span> <a href="mainmenu1/submenu3.html"><img src="images/submenu.gif" width="8" height="12">サブメニュ3</a> </div> </div> 省略 </div> ■スタイルシート■ .menu { font-size:0.75em; margin-left:0; margin-right:0; margin-bottom:50px; margin-top:0; height:2em; width:140px; border-top:solid 1px #33cc99; position:absolute; text-align:left; left:0; top:95px; padding-left:10px } .menu a { color:#33cc99; border-bottom:solid 1px #33cc99; text-decoration:none; display:block; width:100%; line-height:2em; text-align:left; } .menu a:hover { background-color:#ffffcc; } .menu span { color:#000000; display:none; } .menu img { margin-right:10px; margin-left:5px; border:0 } .submenu a{ background-color:#33cc99; border-bottom:solid 1px #ffffff; color:#ffffff; width:100%; } .submenu { visibility:hidden; position:absolute; left:0; width:140px; padding-left:10px; } .submenu a:hover { background-color:#0099cc; width:140px; } #submenu1 { position:absolute; left:0; } #submenu2 { position:absolute; left:0 } #submenu3 { position:absolute; left:0 } #submenu4 { position:absolute; left:0 } #submenu5 { position:absolute; left:0 } #submenu6 { position:absolute; left:0 } ■Javascript■ function MenuOn(x){ obj=document.getElementById("submenu"+x).style.visibility="visible"; } function MenuOff(x){ obj=document.getElementById("submenu"+x).style.visibility="hidden"; }

  • Javascript テキストのみのSELECT

    枠線や右側の▽のない、セレクトボックスを作りたいと思っています。 http://okwave.jp/qa/q3450726.html 上記リンク先によると、htmlタグのselectを弄る方向では実現できないようなので、 http://jsajax.com/Articles/DropDownMenu/286 上記リンク先で紹介されているドロップダウンメニューを改造して作成しようとしています。 現状でオンマウスで添付画像のような表示になるのですが、これのsub1をクリックした際にmainと入れ替わる、といった処理をどのようにすればよいのかが分かりません。 対応させたいブラウザはFirefox, Google Chromeの2つのみです。 以下は現状の実装です。 <html> <head> <title>DropDown Menu</title> <script> /* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Konstantin Jagello | http://javascript-array.com/ */ var TimeOut = 300; var currentLayer = null; var currentitem = null; var currentLayerNum = 0; var noClose = 0; var closeTimer = null; function mopen(n) { var l = document.getElementById("menu"+n); var mm = document.getElementById("mmenu"+n); if(l) { mcancelclosetime(); l.style.visibility='visible'; if(currentLayer && (currentLayerNum != n)) currentLayer.style.visibility='hidden'; currentLayer = l; currentitem = mm; currentLayerNum = n; } else if(currentLayer) { currentLayer.style.visibility='hidden'; currentLayerNum = 0; currentitem = null; currentLayer = null; } } function mclosetime() { closeTimer = window.setTimeout(mclose, TimeOut); } function mcancelclosetime() { if(closeTimer) { window.clearTimeout(closeTimer); closeTimer = null; } } function mclose() { if(currentLayer && noClose!=1) { currentLayer.style.visibility='hidden'; currentLayerNum = 0; currentLayer = null; currentitem = null; } else { noClose = 0; } currentLayer = null; currentitem = null; } document.onclick = mclose; </script> <style> #dd { margin-left: 25%; padding: 0 0 20px 0; } #dd li { margin: 0; padding: 0; list-style: none; float: left; font: bold 11px arial; } #dd li a.menu { display: block; text-align: center; background: #5970B2; padding: 4px 10px; margin: 0 1px 0 0; color: #FFF; width: 60px; text-decoration: none; } #dd li a.menu:hover { background: #49A3FF; } .submenu { // background: #EAEBD8; border: 1px solid #5970B2; visibility: hidden; position: absolute; z-index: 3; } .submenu a { display: block; font: 11px arial; text-align: left; text-decoration: none; padding: 5px; color: #2875DE; } .submenu a:hover { background: #49A3FF; color: #FFF; } </style> </head> <body> <a href="#" class="menu" id="mmenu4" onmouseover="mopen(4);" onmouseout="mclosetime();">main</a> <div class="submenu" id="menu4" onmouseover="mcancelclosetime()" onmouseout="mclosetime();"> <a href="#">sub1</a> <a href="#">sub2</a> <a href="#">sub3</a> <a href="#">sub4</a> </div> </body> </html>

  • ページを開いた直後のサブメニューを非表示

    現在、個人で利用するサイトをJqueryを導入してリニューアルしようと計画しているのですが、 添付画像のように新しいページを開いた直後は、左の青いサブメニューが必ず表示されてしまいます。 ("#menu ul li ul:first").hide();を入れると 消えることには消えたのですが、 それ以後サブメニューが表示されなくなってしまいました。 どなたかお分かりの方、ご助言をお願い致します。 参考までに以下にHTMLとCSSのコードを記載します。 (HTML) <html> <head> </head> <body> <div id="content"> <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">Our Passion</a> <ul class="sub1" style="background-position:0 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="bg1" style="background-position:-266px 0px;"> <a id="bg2" href="#">Our Brands</a> <ul class="sub2" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">Contact</a> <ul class="sub3" style="background-position:-266px 0;"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> </ul> </div> </div> </body> </html> (CSS) .menuWrapper{ font-family: "Trebuchet MS", Arial, sans-serif; font-size: 15px; font-style: normal; font-weight: normal; text-transform:uppercase; letter-spacing: normal; line-height: 1.45em; position:relative; margin:20px auto; height:542px; width:797px; background-position:0 0; background-repeat:no-repeat; background-color:transparent; } ul.menu{ list-style:none; width:797px; } ul.menu > li{ float:left; width:265px; height:542px; border-right:1px solid #777; background-repeat:no-repeat; background-color:transparent; } ul.menu > li.last{ border:none; } .bg1{ background-image: url(../images/1.jpg); } .bg2{ background-image: url(../images/2.jpg); } .bg3{ background-image: url(../images/3.jpg); } ul.menu > li > a{ float:left; width:265px; height:50px; margin-top:450px; text-align:center; line-height:50px; color:#ddd; background-color:#333; letter-spacing:1px; cursor:pointer; text-decoration:none; text-shadow:0px 0px 1px #fff; } ul.menu > li ul{ list-style:none; float:left; margin-top:-180px; width:100%; height:110px; padding-top:20px; background-repeat:no-repeat; background-color:transparent; } ul.menu > li ul li{ display:none; } ul.menu > li ul.sub1{ background-image:url(../images/bg1sub.png); } ul.menu > li ul.sub2{ background-image:url(../images/bg2sub.png); } ul.menu > li ul.sub3{ background-image:url(../images/bg3sub.png); } ul.menu > li ul li a{ color:#fff; text-decoration:none; line-height:30px; margin-left:20px; text-shadow:1px 1px 1px #444; font-size:11px; } ul.menu > li ul.sub1 li{ display:block; } ul.menu > li ul li a:hover{ border-bottom:1px dotted #fff; }

  • JavaScriptで、タグを書き出す方法

    フレ-ムを使わずにスタイルシ-トでメニュ-を表示する領域を指定して、その領域内にメニュ-(目次)を表示したいのですが、一度で全てを書きかえられるようにJavaScriptを外部ファイルにしてメニュ-が表示出来るようにしたいと思います。 スタイルシ-トの部分では *{ font-size:12px; line-height;125%; } #menu{ padding-top:12px; padding-left:12px; position:absolute; top:110px; width:150px; background-color:#cc99cc } em{ font-style:normal; font-weight:400 } #ind1{ padding-left:12px } で、メニュ-を表示する領域等を決めています。 <body>~</body>の間では、 <div id="menu"> <script Language="JavaScript"> <!-- function exMenu(tName) { tMenu = document.all[tName].style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --> </script> <a href="javaScript:exMenu('treeMenu1')">1</a><br> <div id="treeMenu1" style="display:none"> <a href="javaScript:exMenu('treeMenu2')"><em id="ind1">1-1</em></a><br> <div id="treeMenu2" style="display:none"> <a href="1-1-1.html"><em id="ind1">1-1-1</em></a><br> <a href="1-1-2.html"><em id="ind1">1-1-2</em></a><br> </div> </div> でメニュ-を表示するようにしています。 この<body>~</body>の間の部分を、 <div id="menu"> 外部ファイルのJavaScriptを呼び出すタグ </div> というようにして、外部ファイルのJavaScriptのみを書きかえるだけで全てのペ-ジのメニュ-が変えられるようにしたいと思います。 この場合の、 1:勝手に書いてくれる外部ファイルにするJavaScriptの記述のしかた 2.1を呼び出すタグの記述 を教えて下さい。

  • オンマウスで表示されるサブメニューについて

    よろしくお願い致します。 メインメニューにオンマウスすると、サブメニューが表示される ようにしたく、下記のようなコードを使用しています。 FirefoxやsSafariで起きる問題なのですが、サブメニューを表示 した状態で他のページに移動後、ブラウザのバックを使用しても 戻ってきたとき、移動前に表示していたサブメニューが開いたまま になっており、その後ずっと開いたままで非表示にならないことが あります。 色々試してみたのですが、うまく行かず困っています。 どうか解決策をお教え下さいますようお願い致します。 <html> <head> <script type="text/javascript"> <!-- function showHide(targetID) { if( document.getElementById(targetID)) { if( document.getElementById(targetID).style.display == "none") { document.getElementById(targetID).style.display = "block"; } else { document.getElementById(targetID).style.display = "none"; } } } window.onload = function() { document.getElementById(targetID).style.display = "none"; }; //--> </script> </head> <body> <a href="#" onMouseOver="showHide('subnavi');return false;">メインメニュー</a> <div id="subnavi" style="display:none;"> <a href="http://www.yahoo.co.jp/">サブメニュー</a> </div> </body> </html>

  • 3階層メニューについての質問です。

    元の文字  →あ   →A   →B  →い   →C   →D 「元の文字」をクリックすると「あ」「い」が同時に出現。 「あ」をクリックすると「A」「B」が出現。 となるようにしたいのですが、 <HEAD>~</HEAD>内↓ <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> <BODY>~</BODY>内↓ <A href="javaScript:treeMenu('treeMenu1')">元の文字</A><br> <DIV id="treeMenu1" style="display:none"> <br> <A style="color :white;" href="javaScript:treeMenu('treeMenu2')">   あ</A><br> <DIV id="treeMenu2" style="display:none">   <A style="color : red;" href="***(←URL省略)">A</A><BR>   <A style="color : red;" href="***">B</A><BR> <br> <A style="color : white;" href="javaScript:treeMenu('treeMenu3')">   い</A><br> <DIV id="treeMenu3" style="display:none">   <A style="color : red;" href="***">C</A><BR>   <A style="color : red;" href="***">D</A><BR> </DIV> </DIV> </DIV> とすると、 「元の文字」をクリックすると「あ」が出現。 「あ」をクリックすると「A」「B」「い」が出現となります。 上記タグを少し変更して「あ」「い」を 同時に出現させる方法を教えて頂きたいです。 treeMenu○部分の変更で、出来るかと思ったのですが、 上手くいきませんでした。 宜しくお願い致します。

  • プルダウンメニューを表の中に入れるには?

    下記のソースに表記されているプルダウンメニューを 同じく下記に表記されている表の中に埋め込むにはどうしたら 良いのでしょうか? ご存知の方がいらっしゃいましたら、教えていただけると大変 ありがたいです。宜しくお願いします。 <html> <head> <title></title> <style> <!-- #MainMenu { background-color:lightsteelblue; color:black; position:absolute; z-index:99; } #SubMenu { background-color:lightsteelblue; color:black; display:none; } a.SubMenu { color: gray; text-decoration:none; font-weight:bold; } a.SubMenu:hover { color: black; } --> </style> <LINK rel="stylesheet" href="table.css" type="text/css" id="TABLE_CSS_ID_"> </head> <body> <table id="MainMenu" border="0" cellpadding="0" cellspacing="0"> <tr> <TD onmouseover="document.getElementById('SubMenu').style.display='block'" onmouseout="document.getElementById('SubMenu').style.display='none'"> <span class="SubMenu" style="color:Navy;font-weight:bold;">メインメニュー</span> <div id="SubMenu"> <table border="0" cellpadding="0" cellspacing="0"> <tr><td> <A class="SubMenu" href="submenu1.html">サブメニュー1</A><br> <A class="SubMenu" href="submenu2.html">サブメニュー2</A><br> <A class="SubMenu" href="submenu3.html">サブメニュー3</A> </td> </tr> </table> </div> </TD> </tr> </table> <CENTER> <TABLE border="1" cellspacing="0" cellpadding="2" id="TABLE_1_A_080522104101" class="cnt-tb1"> <TBODY> <TR> <TD class="cnt-tb-cell1" align="center" width="285" height="31"></TD> </TR> </TBODY> </TABLE> </CENTER> </body> </html>

  • javascript について追加の質問

    質問NO6591909=3/14 10:59の追加の質問です。 素晴らしい回答で非常に感謝いたしますが、追加でもう一つお願いします。あと一息といったところです。最後の部分なのですが、 function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; var img = document.getElementById('s1').getElementsByTagName("img"); img[0].src = "別の画像のURL" flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); var the_id2 = "s" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; var img = document.getElementById(the_id2).getElementsByTagName("img"); img[0].src = "別の画像のURL" } この3行上の"別の画像のURL"とありますが、上記ですと決まった一枚の画像しか表示できないということになりますよね? IDは9つありまして、9つ別々の画像をそれぞれ選択できるようにしたいのですが、その点を考慮するとどのような文になりますでしょうか?(function fx()を9つ別々に書くんでしょうか?・・・・・・)よろしくお願いいたします。 因みにここからhtml↓(さっきも書きましたが、また書いておきます。) <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div>

  • メニューのツリー化でfirefoxsでjavascriptが動作しません。

    メニューのツリー化をしようと思い、以下のサンプルを使用しました。 IEでは問題なく動くのですが、Firefoxでは動作しません。恐らくネットスケープでも動作しないと思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>クリックするとツリーメニューを表示する(1つだけ展開し後はたたむ)</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>■検索サイト1<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>■検索サイト2<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>■検索サイト3<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宣言をしていても動くようにしたいと思います。 どなたかアドバイスをよろしくお願いいたします。

  • JavaScriptで折りたたみメニュー

    現在、JavaScriptを利用して折りたたみメニューを作成しました。 2つの項目の下にそれぞれ下層メニューがあり、各項目をクリックするごとに下層メニューが開いたり閉じたりできる状態なのですが、 このどちらかの項目をクリックしたとき、その項目の下層メニューは表示されるが、もう一方の項目の下層メニューは閉じる。というようにするにはどうすればよいでしょうか?(両方の下層メニューが同時に開いている状態が無いように。) よろしくお願いいたします。 【XHTML】 <ul> <li><a href="javascript:exMenu('treeMenu1')">項目1</a> <ul id="treeMenu1" style="display:none"> <li><a href="#">項目1-1</a></li> <li><a href="#">項目1-2</a></li> <li><a href="#">項目1-3</a></li> </ul> </li> <li><a href="javascript:exMenu('treeMenu2')">項目2</a> <ul id="treeMenu2" style="display:none"> <li><a href="#">項目2-1</a></li> <li><a href="#">項目2-2</a></li> <li><a href="#">項目2-3</a></li> </ul> </li> </ul> 【JavaScript】 function exMenu(tName) { tMenu = document.getElementById(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; }

専門家に質問してみよう