- ベストアンサー
自閉式ツリーの修正について
こんにちは。いつもお世話になっております。 こちらを参考に自閉式ツリーを作りました。 http://amenti.usamimi.info/treemenu2.html --------------------------------------------------------------- <p><a href="javascript:tree2('tree','menu1');" title="ツリーあり">ツリーあり</a></p> <div class="tree" id="menu1"> <ul> <li><a href="aaa.html" title="aaa">aaa</a></li> <li><a href="bbb.html" title="bbb">bbb</a></li> </ul> </div> <p><a href="nashi.html" title="ツリーなし">ツリーなし</a></p> --------------------------------------------------------------- ツリーにする必要のないメニューがあったので、上記の通り<div>～</div>を消したのですが、そのメニューをクリックしても開いたメニューが閉じてくれません。 いろいろと試したのですが駄目だったので、質問に伺いました。 どのように修正をしたらうまく動作するでしょうか。 ご教示のほどよろしくお願いします。
- yako_k
- お礼率77% (62/80)
- JavaScript
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
htmlでは「ツリーなし」をクリックしたら別ページが開くようになってますから、「そのメニューをクリックしても開いたメニューが閉じてくれません。」というのがちょっと状況がわかりませんが、 もし別フレームとかに出していて、元のページは遷移せずに残ってるとかでしたら、 「ツリーなし」をクリックしたときにJavaScriptコードが実行されるようになってませんね。ですから、それをクリックしても、一度開いた「ツリーあり」の方が閉じられることはありません。 あと、くだんのJavaScriptコードは、下にぶら下げるツリーなdivが無いと動作しないようになってる感じですので、中身のないダミーのdivは必要です。 <p><a onclick="tree2('tree','menu2');" href="nashi.html" title="ツリーなし" target="xxxx">ツリーなし</a></p><div class="tree" id="menu2"></div> といった形にしておけば、ツリーなしをクリックしたときにツリーありの方の開いたツリーは閉じさせられます。
その他の回答 (1)
- asteroid-b
- ベストアンサー率61% (16/26)
記載されたHTML部分に問題はなさそうです。 スクリプト部分は参考URLと全く同じですか？ 原因はJavaScriptか記載されていないHTMLの部分になるとおもいます。
お礼
回答をありがとうございます。 スクリプトは参考URLと同じでした。 初心者のわかりにくい説明で大変失礼致しました。 このたびは本当にありがとうございました。
関連するQ&A
- 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
- 別ページのインラインフレームに表示させる方法
別ページのインラインフレームに表示させる方法 こんにちは。いつもお世話になっております。 数日前に自閉式ツリーについて質問させていただきました。 ありがとうございました。 http://okwave.jp/qa/q5526156.html --------------------------------------------------------------- <script type="text/javascript"> <!-- function tree2(menu_class,menu_id) { var div=document.getElementById(menu_id); if (div.style.display == "block") div.style.display="none"; else { var sib=div.parentNode.childNodes; for (var i=0; i < sib.length; i++) if (sib[i].className == menu_class) sib[i].style.display="none"; div.style.display="block"; } } // --></script> <style type="text/css"> <!-- .tree { display:none; } --></style> <p><a href="javascript:tree2('tree','menu1');" title="展開">展開</a></p> <div class="tree" id="menu1"> <ul> <li><a href="a.html" title="あ" target="frame">あ</a></li> <li><a href="aa.html" title="ああ" target="frame">ああ</a></li> </ul> </div> --------------------------------------------------------------- 【参考ページ】http://amenti.usamimi.info/treemenu2.html というふうに作っているのですが、たとえばAページの上記ツリーをクリックした際に内容がBﾍﾟｰｼﾞのインラインフレームframeに表示され、かつツリーが展開しているというような動作は可能でしょうか。 いろいろと高望みをしているとは思いますが、できればお力をお貸しください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- onMouseoutの有効な範囲
初期状態：aaaという文字のみ表示 動作：aaaをクリックするとその下にbbb,cccというリンクが現れ、これら（aaa,bbb,cccの領域）からマウスアウトしたら、bbb,cccが消える というものを作る為に、以下のコードを書いてみました。 <div onMouseout="this.childNodes[1].style.display='none'"><p onClick="this.parentNode.childNodes[1].style.display='block'">aaa</p><ul style="display:none;"><li><a href="#">bbb</a></li><li><a href="#">ccc</a></li></ul></div> 「ブラウザによりノードのカウント方法が異なり挙動が変わる」のを防ぐために改行をなくしましたが、見やすくするとこうなります↓ <div onMouseout="this.childNodes[1].style.display='none'"> <p onClick="this.parentNode.childNodes[1].style.display='block'">aaa</p> <ul style="display:none;"> <li><a href="#">bbb</a></li> <li><a href="#">ccc</a></li> </ul> </div> これを実際に試してみると、aaaを押してリンクbbb,cccが出てきたのは良いものの、 リンクをクリックするためにマウスをbbb,cccへ移動しようとすると、 aaaから離れた時点でbbb,cccが消えてしまいます。 「div全体に」”マウスアウトしたらbbb,cccが消える”というつもりで上記のソースを書いたのですが、 divのonMouseoutはpからマウスアウトしても働いてしまうのでしょうか。 どのように修正したらよいか試行錯誤中です。 解決策があれば、どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- ツリーメニューについて
フレームページで、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
- jqueryで要素の獲得方法
jqueryについてお聞きしたします。 下記のようなソースで <div class="sideBox"> <div class="sideBoxHead"> ・・・ </div> <div class="sideBoxInner basename"> <ul><li class="on"><span title="main title">aaa</span></li> <li><a href="html1" title="title1">bbb</a></li> <li><a href="html2" title="title2">bbb</a></li> ： ： <li class="last"><a href="htmlX" title="titleX">zzz</a></li> </ul></div> </div> "title2"をクリックした時の"html2"を獲得したいのですが $("div.sideBox > div > ul > li > a").click(function(){ var value = this.href; console.log("varlue = " + value); }); としても値が獲得できません。 直接"sideBoxInner basename"classからたどれば上手くいくような気がするのですが クラス名に半角スペースがある場合、どのようにすればいいのでしょうか？
- 締切済み
- JavaScript
- プルダウンのメニュー表示について
JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1 ●メニュー1-1 ●メニュー1-2 ●メニュー1-3 ●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。 こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか？ 何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか？ 以下がコードの一部です。 [html] <div class="tree"> <a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a> <div class="tree_sub"> <ul> <li class="left">●メニュー1-1</li> <li>●メニュー1-2</li> </ul> <ul> <li class="left">●メニュー1-3</li> <li>●メニュー1-4</li> </ul> </div> </div> <div class="tree"> <a href="#">○メニュー2</a> </div> [css] div.tree { border-bottom:1px solid #000000; width:365px; } div.tree_sub ul li { float:left; } div.tree_sub ul li.left { width:50%; }
- ベストアンサー
- その他（プログラミング・開発）
- IEだけで動くツリー表示
はじめまして。 IEだけで動くツリー表示をしたいと思っています。 ファイルを読み込んだとき、IEだけツリーの内容を閉じた状態で表示し、 それ以外のものは開いた状態で、ツリーの動作をしなくても良いと思っています。 一体どうすればいいでしょうか？？ -----------------------------ソース--------------------------------- <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script Language="JavaScript"><!-- function check(){ str = navigator.appName.toUpperCase(); if (str.indexOf("EXPLORER") >= 0){ treeMenu1.display = "none"; } } function exMenu(tName) { tMenu = document.all[tName].style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --></script> </head> <body bgcolor="#FFFFFF" Onload="check()"> <a href="javaScript:exMenu('treeMenu1')">タイトル</a> <div id="treeMenu1"> <table border=0 cellspacing=2 cellpadding=2 width="100%"> <tr bgcolor="#ffffff"> <td><font color="#808080"> <ul> <li>内容１ <li>内容２ <li>内容３ <li>内容４ <li>内容５ <li>内容６ </ul> </font></td> </tr> </table> </div> </body> </html>
- ベストアンサー
- JavaScript
- ツリーメニューで子のページのとき親が開く
他のプログラムと連携しています 現時点ではクリックすれば親が開き子の部分が出てくるようにしています。 子のページのＵＲＬを見たときに ツリーのその親は自動的に開きたいのです。 show('1');のこの”１”は他のプログラムから出力しているものです。 子のものも同じように値を出力できるのですが JavaScriptでどのように書けば親が開くのかよくわかりません＾＾；。 よろしくお願いします。 //javascript// function show(inputData) { var objID=document.getElementById( "obj_" + inputData ); var buttonID=document.getElementById( "button_" + inputData ); if(objID.className=='close'){ objID.style.display='block'; objID.className='open'; buttonID.src='images/close.gif'; } else{ objID.style.display='none'; objID.className='close'; buttonID.src='images/open.gif'; } } //HTML// <ul> <li><input type="image" src="images/open.gif" id="button_1" onclick="show('1');"> <a href="javascript:show(1)">Ａメニュー</a> </li> <div id="obj_1" style="display:none;position:relative;" class="close"> <ul><li><a href="11.html" >Ａ-1メニュー </a></li> <li><a href="12.html">Ａ-2メニュー </a></li> <li><a href="11.html" >Ａ-3メニュー </a></li> </ul> </div> </ul> <ul> <li><input type="image" src="images/open.gif" id="button_2" onclick="show('2');"> <a href="javascript:show(2)">Ｂメニュー</a> </li> <div id="obj_2" style="display:none;position:relative;" class="close"> <ul><li><a href="21.html">Ｂ-1メニュー </a></li> <li><a href="22.html">Ｂ-2メニュー </a></li> <li><a href="23.html">Ｂ-3メニュー </a></li> </ul> </div> </ul>
- 締切済み
- JavaScript
- Mozillaでツリーメニュー内のリンクが動作しない
http://oshiete1.goo.ne.jp/qa3462499.html こちらで質問した者ですが、その後原因がおぼろげながら掴めてきた＝質問の趣旨が変わってきたのと、のんびりしてもいられなくなったので こちらで再度質問させていただきます。 現在、フレームを使用したページを作成しています。上フレーム（top）と左下フレーム（menu）、右下フレーム（main）の構成です。 menuページでは以下のツリーメニュースクリプトを利用していますが、FireFoxなどのMozilla系ブラウザでは、下記ソースの<ul id="treemenu">以下のリンクが動作せず、ページを表示することができません。（IEでは動作します） 「スクリプトを削除する」もしくは「id="treemenu"を削除する」、または「リンクの上で右クリック→新しいタブ（ウィンドウ）で開く」ことで、Mozilla系ブラウザでもページが開くことは確認したのですが、どうしたらIE・Mozillaに関わらず、ツリーメニュー内できちんとリンクを機能させることができるのでしょうか？ ////////////////////////以下ソース////////////////////////// <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> //メニューIDを列記 var has_event_id = new Array("treemenu"); //初期動作 if(document.all || document.getElementById){ window.onload = ice_menu_initialize; } //関数郡 function ice_menu_initialize(){ for (i=0;i<has_event_id.length;i++){ menu_lists = document.getElementById(has_event_id[i]).getElementsByTagName("li"); for (j=0;j<menu_lists.length;j++){ if(document.all && document.getElementById){ menu_lists.item(j).onclick = ice_menu; }else if(document.getElementById){ menu_lists.item(j).addEventListener("click", ice_menu, false); } } } if(document.hasChildNodes){ var child_lists = document.getElementsByTagName("ul"); for (i=0;i<child_lists.length;i++){ if(child_lists.item(i).getAttribute("class")=="list-child" || child_lists.item(i).getAttribute("className")=="list-child"){ child_lists.item(i).style.display="none"; } } } } //メニュー開閉部 function ice_menu(evt){ var parent_tree_menu = this; if(parent_tree_menu.getElementsByTagName('ul').item(0)){ var child_menu = parent_tree_menu.getElementsByTagName('ul'); if (child_menu.item(0).style.display == 'block'){ child_menu.item(0).style.display = 'none'; for(i=0;i<child_menu.length;i++){ if(child_menu.item(i).getAttribute("class") == "list-child" || child_menu.item(i).getAttribute("className") == "list-child"){ child_menu.item(i).style.display = 'none'; } } }else{ child_menu.item(0).style.display = 'block'; } } if(document.all && document.getElementById){ event.cancelBubble=true; }else if(document.getElementById){ evt.stopPropagation(); evt.preventDefault(); } } </script> <title>メインメニュー</title> </head> <body> <ul> <li>●メニュー１ <ul> <li>▽<a href="test.html" target="main">サブメニュー１</a></li> <li>▽<a href="test.html" target="main">サブメニュー２</a></li> <li>▽<a href="test.html" target="main">サブメニュー３</a></li> </ul> </li> </ul> <ul> <li><span id="top">●メニュー２</span> <ul id="treemenu"> <li>▽<a href="test.html" target="main">サブメニュー１</a></li> <li>▽<a href="test.html" target="main">サブメニュー２</a></li> <li>▼<a href="#top">サブメニュー３</a> <ul class="list-child"> <li>┣<a href="minitest.html" target="main">ミニメニュー１</a></li> <li>┗ミニメニュー２</li> </ul> </li> <li>▼<a href="#top">サブメニュー４</a> <ul class="list-child"> <li>┣<a href="minitest.html" target="main">ミニメニュー１</a></li> <li>┗ミニメニュー２</li> </ul> </li> </ul> </li> </ul> </body> </html> //////////////////////////ここまで//////////////////////////// ※CSS用のクラスは紛らわしいので省いてあります。
- ベストアンサー
- JavaScript
- 画像メニューの開閉
JavaScriptで画像メニューの開閉を行いたいのですが、 うまく動きません。 「aaa」が閉じていた場合には「aaa」を開くまではできたのですが、 「bbb」を閉じるという１行を追加したら動かなくなりました。 どなたかご教授願います。 【JavaScript】 function showSubmenu01() { if(document.getElementById("aaaSub").innerHTML == '') document.getElementById("aaaSub").innerHTML = '<img src="aaa.gif">'; document.getElementById("bbbSub").innerHTML = ''; else document.getElementById("aaaSub").innerHTML = ''; } 【HTMLソース】 <ul> <li><a href="#" onClick="showSubmenu01()"><img src="img/menu_aaa.gif" /></a></li> <li><div id="aaaSub"></div></li> <li><div id="bbbSub"><img src="bbb.gif" /></div></li> </ul>
- ベストアンサー
- JavaScript
お礼
回答ありがとうございました。 targetの記載が漏れており、大変失礼しました。インラインフレームに表示をしておりました。 教えていただいた方法で、無事にツリーを閉じることができました。 わかりにくい説明であったにも関わらず、的確なご指導をありがとうございました！