- ベストアンサー
３階層メニューについての質問です。
元の文字 →あ →Ａ →Ｂ →い →Ｃ →Ｄ 「元の文字」をクリックすると「あ」「い」が同時に出現。 「あ」をクリックすると「Ａ」「Ｂ」が出現。 となるようにしたいのですが、 <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><BR> <A style="color : red;" href="＊＊＊">Ｂ</A><BR> <br> <A style="color : white;" href="javaScript:treeMenu('treeMenu3')"> い</A><br> <DIV id="treeMenu3" style="display:none"> <A style="color : red;" href="＊＊＊">Ｃ</A><BR> <A style="color : red;" href="＊＊＊">Ｄ</A><BR> </DIV> </DIV> </DIV> とすると、 「元の文字」をクリックすると「あ」が出現。 「あ」をクリックすると「Ａ」「Ｂ」「い」が出現となります。 上記タグを少し変更して「あ」「い」を 同時に出現させる方法を教えて頂きたいです。 treeMenu○部分の変更で、出来るかと思ったのですが、 上手くいきませんでした。 宜しくお願い致します。
- riku257
- お礼率90% (19/21)
- JavaScript
- 回答数5
- ありがとう数4
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは <div id="treeMenu2">でＤまで同じブロックでしているので全部出てしまいますので#1様のように<div>を分割してください あと気になる点が3点ほどあったので余計なお世話かと思いますが追記します 1点目はdocument.allだとdocument.allが効くIEやOperaなどでは階層メニューになるのですが効かないFirefoxなどでは階層メニューにはなりません（＞＜） 汎用的にするには document.getElementById(tName) のようになります 2点目は<br>なんですが<div>はブロック要素なのでそれ自体で改行を含んでいます Ａ～Ｂ、Ｃ～Ｄ間の<br>以外はいらないような気がします 開いたときに、元の文字～あ、Ｂ～い間に1行スペースを空けるようにしているのであれば無視してください 3点目は対象のものだけblock,noneしているのでtreeMenu2やtreeMenu3を開いた状態でtreeMenu1を閉じるともう一度開いたときにtreeMenu2やtreeMenu3が開いた状態で開かれると思うんです trreMenu1を開くときだけ他のを閉じてから開くようにした方が良いのでは？と思います function treeMenu(tName) { if(tName == "treeMenu1") { obj = document.getElementById(tName).getElementsByTagName("div"); for(i=0;i<obj.length;i++) { obj[i].style.display = "none"; } } tMenu = document.getElementById(tName).style; if(tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } ※一例ですので別のやり方で閉じてもいいです
その他の回答 (4)
- yambejp
- ベストアンサー率51% (3827/7415)
おお、そうか構造上は#4さんのやり方がきれいですね。 でわ #sample2.htm <html> <head> <link rel="stylesheet" type="text/css" href="sample2.css" /> <script type="text/javascript" src="sample2.js"></script> </head> <body> <div class="menu"> <div>元の文字</div> <ul> <li> <div>あ</div> <ul> <li> <div>Ａ</div> <ul> <li> <div>１</div> <ul> <li> <div>Ｘ</div> </li> <li> <div>Ｙ</div> </li> <li> <div>Ｚ</div> </li> </ul> </li> <li> <div>２</div> </li> <li> <div>３</div> <ul> <li> <div>Ｘ</div> </li> <li> <div>Ｙ</div> </li> <li> <div>Ｚ</div> </li> </ul> </li> </ul> <li> <div>Ｂ</div> </li> </ul> </li> <li> <div>い</div> <ul> <li> <div>Ｃ</div> </li> <li> <div>Ｄ</div> <ul> <li> <div>１</div> </li> <li> <div>２</div> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> </body> </html> #sample2.css .menu ul{ margin-top:0px; } .link1{ color:red; text-decoration:underline; } .link2{ color:blue; } .hide{ display:none; } #sample2.js window.onload=function(){ setMenu(); } function setMenu(){ var tags=document.getElementsByTagName("div"); var menu=new Object(); var count=0; for(var i=0;i<tags.length;i++){ if(tags[i].className=="menu"){ menu[count++]=tags[i]; } } for(var i in menu){ var tags=menu[i].getElementsByTagName("div"); for(var j=0;j<tags.length;j++){ var sib=tags[j].nextSibling; while(sib){ if(sib.nodeName=="UL"){ tags[j].className="link1"; tags[j].onclick=treeMenu; sib.className="hide"; break; } sib=sib.nextSibling; } } } } function treeMenu(){ this.className=this.className=="link1"?"link2":"link1" var sib=this.nextSibling; while(sib){ if(sib.nodeName=="UL"){ sib.className=sib.className=="hide"?"":"hide"; break; } sib=sib.nextSibling; } }
- ai10
- ベストアンサー率27% (3/11)
スタイルシートで非表示にしてしまうと、 非スクリプト環境ではメニューが非表示のままになってしまう。 できればスクリプト側で(最初の非表示処理も含め、)すべてやってしまいたい。 そのほうが非スクリプト環境でもメニューが全て表示されたままになるので大丈夫です。 ----------------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv='Content-Type' content='text/html; charset=Shift_JIS'> <meta http-equiv='Content-Style-Type' content='text/css'> <meta http-equiv='Content-Script-Type' content='text/javascript'> <script type='text/javascript'> //@cc_on // **** リストの非表示 **** ( function ( selector, property ) { /*@if (@_jscript) var stylesheet = document.createStyleSheet(); stylesheet.addRule( selector, property, -1 ); stylesheet = null; @else@*/ var style = document.getElementsByTagName( 'head' )[0].appendChild( document.createElement( 'style' ) ); style.sheet.insertRule( selector+'{'+property+';}', style.sheet.cssRules.length ); style = null; /*@end@*/ // destroy selector = property = null; } )( '.tree-list', 'display:none' ); // **** ページロード時に実行する **** ( function ( addEvent ) { window./*@if (@_jscript) attachEvent( 'on'+ @else@*/ addEventListener( /*@end@*/ 'load', function () { var arrIds = [ 'id-tree-1', 'id-tree-2', 'id-tree-3' ]; var i, I; for( i=0, I=arrIds.length; i<I; i++ ) addEvent( arrIds[i] ); // destroy i = I = arrIdx = addEvent = null; }, false ); } )( // イベント登録用関数 ( function () { var _regexp = { 'id' : /^id-tree-[0-9]+$/i, 'class' : /^tree-list$/ }; return function ( id ) { var obj = document.getElementById( id ); obj = obj.childNodes[0]; while( obj.nodeType==3 ) obj = obj.nextSibling; if( !obj ) return; obj = obj.childNodes[0]; while( obj.nodeType==3 ) obj = obj.nextSibling; if( !obj ) return; obj./*@if (@_jscript) attachEvent( 'on'+ @else@*/ addEventListener( /*@end@*/ 'click', function ( evt ) { var obj = evt.srcElement || evt.target; // class='tree-list'を探す。ちょっと非効率だけど。 obj = obj.parentNode; while( obj && ( obj.nodeType==3 || !_regexp['class'].test( obj.className ) ) ) obj = obj.nextSibling; if( !obj ) return; // 表示の切り替え if( obj.style.display != 'block' ) obj.style.display = 'block'; else obj.style.display = 'none'; // destroy obj = null; }, false ); // destroy id = obj = null; } } )() ); </script> <style type='text/css'> .tree .tree-title { cursor : pointer; } </style> </head> <body> <div id='id-tree-1' class='tree'> <div><span class='tree-title'>メニューだ</span></div> <ul class='tree-list'> <li> <div id='id-tree-2' class='tree'> <div><span class='tree-title'>あ</span></div> <ul class='tree-list'> <li> <div> Ａ </div> </li> <li> <div> Ｂ </div> </li> </ul> </div> </li> <li> <div id='id-tree-3' class='tree'> <div><span class='tree-title'>い</span></div> <ul class='tree-list'> <li> <div> Ｃ </div> </li> <li> <div> Ｄ </div> </li> </ul> </div> </li> </ul> </div> </body> </html> ----------------------------------------------------------------------------------- なるべくグローバル変数は使わない方向でプログラミングしています。 また、ソースの行頭のインデントは全角スペースが使われていますので もしこのソースを使うのであれば、全角スペースを半角スペースに置換して下さい。
お礼
ご意見ありがとうございました。 No.3 yambejpさん同様、 ai10さん方法は今後の参考にさせて頂きます。 ご意見ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
リストといえばやっぱりULでしょう javascriptで初期設定してしまえば、ULの構造を書けば自動でメニューになります。 link1とかlink2というclassをいじればメニューの見せ方も替えられます。 今回は適当に多段にし、スタイルシートやスクリプトは外部にまとめときました。 # sample.css .menu{ padding:0px; margin:0px; } .menu ul{ margin-top:-1em; } .menu li{ list-style:none; margin:0px; padding:0px; } .hide{ display:none; } .link1{ color:red; text-decoration:underline; } .link2{ color:blue; } #sample.js window.onload=function(){ setMenu(); } function setMenu(){ var uls=document.getElementsByTagName("ul"); var menu=new Object(); var count=0; for(var i=0;i<uls.length;i++){ if(uls[i].className=="menu"){ menu[count++]=uls[i]; } } for(var i in menu){ var lis=menu[i].getElementsByTagName("li"); for(var j=0;j<lis.length;j++){ var l=lis[j].getElementsByTagName("ul").length; if(l>0){ var c=lis[j].parentNode.firstChild; var pre=new Object(); while(c){ if(c.nodeName.toUpperCase()=="LI"){ if(c==lis[j]){ pre.onclick=treeMenu; pre.className="link1"; c.className="hide"; break; } pre=c; } c=c.nextSibling; } } } } } function treeMenu(){ this.className=this.className=="link1"?"link2":"link1" var s=this.nextSibling; while (s) { if(s.nodeName.toUpperCase()=="LI"){ s.className=s.className=="hide"?"":"hide"; break; } s=s.nextSibling; } } #sample.htm <html> <head> <link rel="stylesheet" type="text/css" href="sample.css" /> <script type="text/javascript" src="sample.js"></script> </head> <body> <ul class="menu"> <li>元の文字</li> <li> <ul> <li>あ</li> <li> <ul> <li>Ａ</li> <li> <ul> <li>１</li> <li> <ul> <li>Ｘ</li> <li>Ｙ</li> <li>Ｚ</li> </ul> </li> <li>２</li> <li>３</li> <li> <ul> <li>Ｘ</li> <li>Ｙ</li> <li>Ｚ</li> </ul> </li> </ul> </li> <li>Ｂ</li> </ul> </li> <li>い</li> <li> <ul> <li>Ｃ</li> <li>Ｄ</li> <li> <ul> <li>１</li> <li>２</li> </ul> </li> </ul> </li> </ul> </li> </ul> </body> </html>
お礼
ご意見ありがとうございました。 今回は、質問文に記載したモノの 一部変更での質問でしたので、 No.1 redfox63さん No.2 leap_dayさんの やり方で直しました。 yambejpさんの方法は知らなかったので、 今後に役立てたいと思います。 ご意見ありがとうございました。
- redfox63
- ベストアンサー率71% (1325/1856)
DIVの範囲を見直せばいいように思います <DIV id="treeMenu2" style="display:none">はA,Bのリンクまでとすればいいでしょう <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><BR> <A style="color : red;" href="＊＊＊">Ｂ</A><BR> <br> <!-- ここへ閉じタグを下から移動 --> </DIV> <A style="color : white;" href="javaScript:treeMenu('treeMenu3')"> い</A><br> <DIV id="treeMenu3" style="display:none"> <A style="color : red;" href="＊＊＊">Ｃ</A><BR> <A style="color : red;" href="＊＊＊">Ｄ</A><BR> <!-- ここの閉じタグを移動 --> </DIV> </DIV>
お礼
お礼が遅くなってすみません。 ご指摘頂いた通り変更したところ、 望んでいたように動作しました。 御意見、ありがとうございました。
関連するQ&A
- ツリーメニューを２個つづけると
<script type="text/JavaScript"> <!-- function treeMenu(tName){ tMenu = document.getElementById(tName).style; tMenu.display=(tMenu.display=='none')?"block":"none"; } //--> </script> </head> <body> <img src="icon.gif"> <font color="FF6600"><a href="JavaScript:treeMenu('treeMenu1')">GENSUI</a> <ul id="treeMenu1" style="display:none;margin-top:0px;"> <a href="a.html" target="right">１</a><br> <a href="b.html" target="right">２</a></ul> ここまでで１つめ。下から２つめ <script type="text/JavaScript"> <!-- function treeMenu(tName){ tMenu = document.getElementById(tName).style; tMenu.display=(tMenu.display=='none')?"block":"none"; } //--> </script> </head> <body> <img src="newicon.gif"> <font color="FF6600"><a href="JavaScript:treeMenu('treeMenu1')">ABYSS</a> <ul id="treeMenu1" style="display:none;margin-top:0px;"> <a href="a.html" target="right">３</a><br> <a href="b.html" target="right">４</a></ul> こうすると、２つめの【ABYSS】をクリックすると上の【GENSUI】のツリー『１』『２』がでてきます。（GENSUIを押したときと同じ状態になる） どうすればちゃんと【ABYSS】をクリックして『３』『４』がでてくれますか？
- ベストアンサー
- その他（インターネット・Webサービス）
- メニューバーを製作しています
今 メニューバーを製作しています 検索サイト１ 検索サイト２ 検索サイト３ すべて、サイドページ付です ここまでコピーや改造で出来ました 解らない事 １ 検索サイト１をクリックし次に検索サイト２をクリックした時に検索サイト１が 自動で閉まる用にしたいのですが、上手く出来ません アドバイスを願いします JavaScript・HTML・ｓｃｃ ソースです よろしくお願いします <script Language="JavaScript"><!-- function exMenu(tName) { tMenu = document.all[tName].style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --></script> </HEAD> <BODY bgcolor="white"> <div><A href="javaScript:exMenu('treeMenu')">＋■検索サイト1</A><br> <div id="treeMenu" style="display:none">├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> <A href="javaScript:exMenu('treeMenu1')">＋■検索サイト2</A><br> <div id="treeMenu1" style="display:none">├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> <A href="javaScript:exMenu('treeMenu2')">＋■検索サイト3</A><br> <div id="treeMenu2" style="display:none"> ├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> </div>
- 締切済み
- CSS
- 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
- ベストアンサー
- JavaScript
- メニューのツリー化で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宣言をしていても動くようにしたいと思います。 どなたかアドバイスをよろしくお願いいたします。
- 締切済み
- JavaScript
- アドバイスお願いします
今 メニューバーを製作しています 検索サイト１ 検索サイト２ 検索サイト３ すべて、サイドページ付です ここまで出来ました 解らない事 １ 検索サイト１をクリックし次に検索サイト２をクリックした時に検索サイト１が 自動で閉まる用にしたいのですが、上手く出来ません アドバイスを願いします JavaScriptとHTML ソースです ｓｃｃは使用していません よろしくお願いします <script Language="JavaScript"><!-- function exMenu(tName) { tMenu = document.all[tName].style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --></script> </HEAD> <BODY bgcolor="white"> <div><A href="javaScript:exMenu('treeMenu')">＋■検索サイト1</A><br> <div id="treeMenu" style="display:none">├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> <A href="javaScript:exMenu('treeMenu1')">＋■検索サイト2</A><br> <div id="treeMenu1" style="display:none">├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> <A href="javaScript:exMenu('treeMenu2')">＋■検索サイト3</A><br> <div id="treeMenu2" style="display:none"> ├<A href="http://www.yahoo.co.jp/">Yahoo!</A><br> ├<A href="http://www.goo.ne.jp/">Goo</A><br> └<A href="http://www.lycos.co.jp/">Lycos</A><br> </div> </div>
- 締切済み
- CSS
- displayの状態を取得したい
下記で表示の切替えをしていますが、クリックした後の時点で「★」が見えているかどうかを取得する方法を教えて下さい。下記の中にヒント・回答があるのかもしれませんが、素人のため、わからず・・。 <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('treeMenu')">＋</a>表示切替 <div id="treeMenu" style="display:none"> ★ </div>
- ベストアンサー
- JavaScript
- 階層ツリーについて
■検索サイト<br> <a href="javaScript:exMenu('treeMenu1')">＋</a>■検索サイト１<br> <div id="treeMenu1" style="display:none"> ├<a href="http://www.yahoo.co.jp/">Yahoo!</a><br> ├<a href="http://www.goo.ne.jp/" >Goo</a><br> ├<a href="http://www.lycos.co.jp/">Lycos</a><br> └<a href="javaScript:exMenu('treeMenu2')">＋</a>■検索サイト２<br> <div id="treeMenu2" style="display:none"> ├<a href="http://www.infoseek.co.jp/">Infoseek</a><br> ├<a href="http://www.google.com/" >Google</a><br> └<a href="http://kids.goo.ne.jp/">Kids Goo</a><br> </div> </div> このように書いているのですが、 検索サイト2←これもクリックし、リンクできるようにしたいのですが、どのように書いたらできますか？ 教えてください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- ツリーメニューについて
フレームページで、JavaScriptで文字(下の場合は「親メニュー」)クリックすると 開閉するツリーメニューを使用したいと思っています(フレームあり・なしは訪問者の自由で選べるようにしています)。 http://himajin.moo.jp/menu/menu.html ここや、 http://www.openspc2.org/reibun/javascript/#8 こちらの05・06・63などを参考にして、 自分なりにシンプルに変更してみたのですが、記述に問題点などはありますでしょうか？ 以下が、そのソースです(簡略化しています)。 <html> <head> <script type="text/JavaScript"> <!-- function treeMenu(tName) { tMenu = document.getElementById(tName).style; if(tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } //--> </script> </head> <body> <a href="JavaScript:treeMenu('treeMenu1')">親メニュー</a> <div id="treeMenu1" style="display:none"> <li><a href="a.html" target="main">子メニュー</a></li> <li><a href="b.html" target="main">子メニュー</a></li> </body> </html> また、「document.all」はIE専用だと聞いたので「document.getElementById」 に変更してみたのですが、これでほかのブラウザでも問題は無く使用できますか？ JavaScriptは初めてなのであまり自信がありません。 IEとFirefoxでは動作確認済みです。よろしくお願いします。
- ベストアンサー
- JavaScript
- FireFoxだけちゃんとうごいてくれないです
いつもお世話になっています。 Javascriptでメニューを閉じたり開いたりさせたくて難儀してます。 <script type="text/javascript"> <!-- // ツリーメニュー flag = false; function treeMenu(tName) { tMenu = document.all[tName].style; if(tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } //--> </SCRIPT> <li class="li> <a href="javaScript:treeMenu('treeMenu')">メニュー</a> </li> <DIV id="treeMenu" style="display:none"> <li class="li_sub"> <a href="index.html"> 小メニュー１ </A> </li> <li class="li_sub"> <a href="index.html"> 小メニュー２ </A> </li> </DIV> こんな感じでクリックすると小メニューが出てさらにクリックで非表示になるようにしています。 ＩＥ８やGoogleChromeですとうまくいきます。 （Safariではまだ試していません。） が・・・ FireFox3ではウンともスンともいいません。 記述自体がFirefox3では受け付けないのでしょうか？ 根本的に考え方が違うぞ！とか そういったご意見でもかまいません。 どうかお助けください。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 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"; }
- ベストアンサー
- JavaScript
お礼
お礼が遅くなってしまい、すみません。 質問以外の不備もご指摘頂き、 ありがとうございました。 私自身気づいていないところもあったので、 大変、助かりました。ありがとうございました。