• ベストアンサー
  • すぐに回答を!

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>

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

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

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

  • ベストアンサー
  • 回答No.1

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

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

質問者からのお礼

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

関連するQ&A

  • 一部のjavascriptがfirefoxで効かない

    ホームページのコーディングをしている者ですが、一部のjavascriptがfirefoxで効きません。 クリックした際にサブメニューを表示させていのですが、firefoxだとクリックしてもサブメニューが表示されません。 (IE、safariは正常に表示されます) どなたか下記ソースでの間違えをご教授いただけますでしょうか。 よろしくお願いします。 【jsファイルの記述】 function dispChange(id) { if(id.style.display=="none"){ id.style.display="block"; } else{ id.style.display="none"; } } 【htmlファイルの記述】 <div id="sublist"><a href="JavaScript:dispChange(movieSub)">&gt;&gt;test</a> <div id="movieSub" STYLE="display:none"> <div class="SubSub">├<a href="#">test</a></div> <div class="SubSub">├<a href="#">test</a></div> <div class="SubSub">└<a href="#">test</a></div> </div> </div>

  • javascriptが効かない・・・

    上下のチェックボックス(全チェック)をした後にリンクAのチェックをはずすとリンクBがチェックされている状態になります。 そのときメニューがリンクBがリンクされている状態にしたいのですがうまくいきません。よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift-jis" /> <script type="text/javascript"> function pulldown(flg){ if(flg==0){ addInfoLink.style.visibility="visible"; }else{ updateInfo.style.visibility="visible"; } } function check(){ var cnt = 0; addInfoLink.style.visibility="hidden"; updateInfo.style.visibility="hidden"; for(i=0; i<document.forms[0].check1.length; i++){ if(document.forms[0].check1[i].checked == true){ cnt++; if(document.forms[0].check1[i].value==0){ alert("●"); muneHikasei.style.visibility="hidden"; linkB.style.visibility="visible"; return; }else if(document.forms[0].check1[i].value==1){ alert("▲"); muneHikasei.style.visibility="hidden"; linkA.style.visibility="visible"; return; } } } if(cnt==0){ linkB.style.visibility="hidden"; linkA.style.visibility="hidden"; addInfoLink.style.visibility="hidden"; updateInfo.style.visibility="hidden"; muneHikasei.style.visibility="visible"; } } var allFlg=false; function allCheckAction(){ if(allFlg== false && document.forms[0].allCheck1.checked==true){ for(j=0; j<document.forms[0].check1.length; j++){ document.forms[0].check1[j].checked=true; } check(); allFlg=true; document.forms[0].allCheck2.checked=true; return; } if(allFlg== true && document.forms[0].allCheck1.checked==false){ for(j=0; j<document.forms[0].check1.length; j++){ document.forms[0].check1[j].checked=false; } check(); allFlg=false; document.forms[0].allCheck2.checked=false; return; } if(allFlg== false && document.forms[0].allCheck2.checked==true){ for(j=0; j<document.forms[0].check1.length; j++){ document.forms[0].check1[j].checked=true; } check(); allFlg=true; document.forms[0].allCheck1.checked=true; return; } if(allFlg== true && document.forms[0].allCheck2.checked==false){ for(j=0; j<document.forms[0].check1.length; j++){ document.forms[0].check1[j].checked=false; } check(); allFlg=false; document.forms[0].allCheck1.checked=false; return; } } </script> </head> <body> <div id="muneHikasei" style="position:absolute; visibility:visible; left:9; top:28;">リンク</div> <div id="linkB" style="position:absolute; visibility:hidden; left:9; top:28;"> <a href="javaScript:void(0)" onclick="pulldown(0)">リンク</a> <div id="addInfoLink" style="position:absolute; visibility:hidden; left:4px top:16px; width:80; height:1px; background-color:#FFFFFF; layer-background-color:#FFFFFF"> リンクA<br /> <a href="">リンクB</a> </div> </div> <div id="linkA" style="position:absolute; visibility:hidden; left:9; top:28;"> <a href="javascript:void(0)" onclick="pulldown(1)">リンク</a> <div id="updateInfo" style="position:absolute; visibility:hidden; left:4px top:16px; width:80; height:1px; background-color:#FFFFFF; layer-background-color:#FFFFFF"> <a href="">リンクA</a><br /> リンクB </div> </div> <br><br><br><br><br> <form name="" method="post"> <input type="checkbox" name="allCheck1" value="1" onclick="allCheckAction()"/> <br> <input type="checkbox" name="check1" value="1" onclick="check()"/>リンクA <br> <input type="checkbox" name="check1" value="0" onclick="check()" />リンクB <br> <input type="checkbox" name="allCheck2" value="1" onclick="allCheckAction()"/> </form> </body> </html>

  • 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)

  • 回答No.2

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

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

質問者からのお礼

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

関連するQ&A

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

    以下の設定をおこなった際に「プルダウン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>

  • 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を呼び出すタグの記述 を教えて下さい。

  • JavaScriptを利用しツリーメニューを作成していますが、

    JavaScriptを利用しツリーメニューを作成していますが、 ページを飛んで戻ってくるとメニューが閉じてしまいます。 更新を押した場合も同じです。 それを開いた状態に保っておきたいのです。 ちなみにソースは、 <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> <HEAD> と最初に書いておいて、 ツリーメニューを表示させたいところに、 <A href="javaScript:treeMenu('treeMenu1')">○○○</a><br> <DIV id="treeMenu1" style="display:none">  ┣<A href="aaa.html">aaa</A><BR>  ┣<A href="bbb.html">bbb</A><BR>  ┗<A href="ccc.html">ccc</A><BR> </DIV> と書いてます。 どこをどのように変えればよいですか? よろしくお願いします。 また参考にさせて頂いたサイトも一緒に載せておきます。 http://javascript.eweb-design.com/0703_tm.html

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

    テーブル内のカテゴリをクリックすると、別テーブルにリンク先一覧を表示させるような、リンクページを作りたいのですが、下記のように組むと、 「リンク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>

  • 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○部分の変更で、出来るかと思ったのですが、 上手くいきませんでした。 宜しくお願い致します。

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

    初心者です。本当に初歩な質問で申し訳ありません。 ドロップダウンリストを作り、クリックしたときにサブメニューを表示したいのですが、 表示、非表示は切り替えられても、非表示のときに空欄ができてしまいます。 これを、非表示のときは上に詰めて表示するようにしたいのですが、その方法を 教えてください。 下記がそのソースになります。 <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> 以上、よろしくお願いいたします。

  • ▲▲JavaScriptのツリーメニューについて▲▲

    現在このような記述でツリーメニューを作っています trList = ["treeMenu1","treeMenu2","treeMenu3","treeMenu4","treeMenu5","treeMenu6","treeMenu7","treeMenu8"]; 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"; } 本文は <img src="sozai/menu1.gif" alt="矢印" width="13" height="13">&nbsp;<a href="javascript:exMenu('treeMenu1')">教会のご案内</a> <div id="treeMenu1" style="display:none" class="font_menu2"> <img src="sozai/menu2.gif" alt="矢印" width="9" height="9">&nbsp;<a href="kyoukai_1_1.html" target="main">牧師・スタッフの紹介</a><br> <img src="sozai/menu2.gif" alt="矢印" width="9" height="9">&nbsp;<a href="kyoukai_2_1.html" target="main">教会施設の紹介</a><br> <img src="sozai/menu2.gif" alt="矢印" width="9" height="9">&nbsp;<a href="kyoukai_3_1.html" target="main">交通のご案内</a><br> <img src="sozai/menu2.gif" alt="矢印" width="9" height="9">&nbsp;<a href="kyoukai_4_1.html" target="main">教会QandA</a> </div> こんな感じです☆多少こちらで決めたタグなども入っていますが…。 テーブルを使って記述しています。 上記を見まして、「教会のご案内」をクリックするとメニューが出てきます。もう一度「教会のご案内」をクリックすると表示されたメニューが表示されていない状態に戻すように表示をしたいんです。 説明下手ですが、おわかりになる方タグなどを教えてくださいv(。・・。)

  • Navimenuについて

    NaviMenuなのですが、XPだとうまく表示されるのですが、それ以外だと駄目みたいなのです。 <STYLE TYPE="text/css"> <!--  A:link { color:Black;}  :visited { color:Black;}  A:hover { background-color:Black;      color:white ;}  BODY { background-color:black; }  .title { position:relative;      text-align:center;      font:bold 50pt Times ;}     #NaviMenu { position:absolute;       width:150px;       border:DimGray 0.5em ridge;       background-color:GainsBoro;       z-index:1;       visibility:hidden ;} --> </STYLE> <SCRIPT LANGUAGE="JavaScript">  var flag = true;  unction Menu() {   if(flag) {    NaviMenu.style.posLeft = event.clientX;    NaviMenu.style.posTop = event.clientY;    NaviMenu.style.visibility = "visible";    flag = false;   }  else {    NaviMenu.style.visibility = "hidden";    flag = true;     }  }  document.ondblclick = Menu; </SCRIPT> -------------------------------------------------- <DIV id="NaviMenu" style="position:absolute;width:150px;z-index : 5;visibility:hidden;"> <SPAN STYLE="width:150px;background-color:Silver;text-align:center;color:Black;font:14pt Times new roman">Navigate Menu</SPAN><BR> メニュー1 メニュー2 メニュー3 メニュー4 メニュー5 </DIV> どのようにすれば、Winユーザー全てに対応出来るのでしょうか? (林檎USERの方、ごめんなさい) アドバイス宜しくお願いいたします。

    • 締切済み
    • CSS
  • JavaScriptについての質問です。

    javascript初心者です。方法が分かりませんので、教えていただける方、お願いいたします。ホームページを作っております。とあるページの下の部分をクリックすると、新しいウィンドウが開きます。 <a href="#" onClick="window.open('f/f.html?1','newWin','width=850,height=650')">テキスト</a> 新しいページは次のようになっています。 ↓ここからJavaScript↓ flag = false; function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; } ここから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> 以上です。上記に関して説明を付け加えますと、新しいウィンドウ(新しいページ)上では、function fx とpd1が作動し、div ID1がプルダウンメニューのように開くようになっています。 それに付け加えたいのですが、冒頭であげた部分をクリックするとID1がプルダウンのように開くだけでなく、div s1の name="s1img"であげた部分を別の画像が表示されるようにするにはどのようなjavascriptを追加すればいいでしょうか?   どなたか教えていただければ有り難いです・・・・・。

  • メニューのツリー化で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宣言をしていても動くようにしたいと思います。 どなたかアドバイスをよろしくお願いいたします。