- 締切済み
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>
- windows-7-home
- お礼率40% (2/5)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- noris02
- ベストアンサー率74% (56/75)
ひとつの方法として 書いてみました。 いろいろ 試してみてください。 クリックされたら 出したいもの以外を隠してしまう。 <html><head> <style type="text/css"> div.menu{margin:0;padding:0;position:absolute;top0;height:17px;font-size:15px;} .menu ul,.menu li{margin:0;padding:0;text-align:center;list-style-type:none;} .menu ul.A{float:left;display:inline-block;width:100px;} .A a{background:#000;color:#fff;width:100%;display:block;text-decoration:none;} .A a:hover{background:#333;color:orange;} #a0{display:none;} #a1{display:none;} #a2{display:none;} .c-both{clear:both;} </style> <script type="text/javascript"> function ge(id){return document.getElementById(id);} function g(id){var g;g=ge(id) ? true : false;return g;} function change(key,b){ var i=0; while(g("a"+i)){ if(key==i){ if(ge("a"+i).style.display=="none")ge("a"+i).style.display="block"; else ge("a"+i).style.display="none"; }else{ ge("a"+i).style.display="none"; } i++; } } window.onload=function(){ ge("AA0").onclick=function(){change(0,true);} ge("AA1").onclick=function(){change(1,true);} }; </script> </head> <body> <div class="menu"> <ul class="A" id="AA0"> <li>a <ul id="a0"> <li><a href="#">aaaaaa</a></li> <li><a href="#">aaaaaa</a></li> <li><a href="#">aaaaaa</a></li> </ul> </li> </ul> <ul class="A" id="AA1"> <li>b <ul id="a1"> <li><a href="#">bbbbbb</a></li> <li><a href="#">bbbbbb</a></li> <li><a href="#">bbbbbb</a></li> </ul> </li> </ul> <ul class="A" onmouseover="change(2,true)" onmouseout="change(2,false)"> <li>c <ul id="a2"> <li><a href="#">cccccc</a></li> <li><a href="#">cccccc</a></li> <li><a href="#">cccccc</a></li> </ul> </li> </ul> <br class="c-both"> </div> </body></html>
このソースはこちらのページのサンプルと一緒ですね？ http://javascript.eweb-design.com/0703_tm.html function の呼び出し元を以下のようにすれば良いのではないでしょうか。 （上のページの Sample 1 の21行目を修正しています） <A href="javaScript:treeMenu('treeMenu1');treeMenu('treeMenu2');">■ Yahoo! Japan1</a><br>
お礼
回答ありがとうございます。 自分で色々なサイトを見て解決することができました。 お手数をおかけしてしてしまい申し訳ありませんでした。
お礼
回答ありがとうございます。 自分で色々なサイトを見て解決することができました。 お手数をおかけしてしてしまい申し訳ありませんでした。