Java script でのツリーメニューの表示非表示について

2023/08/08 02:40

このQ&Aのポイント

Java scriptを使用して、ツリーメニューの表示や非表示を制御する方法について教えてください。
ツリーメニューを作成し、大分類をクリックするとその下のカテゴリメニューが表示され、再度クリックすると非表示になるようなメニューを作成したいです。
しかし、カテゴリメニューをクリックして他のページに移動すると、全てのメニューがリセットされてしまいます。リンクで移動してもカテゴリメニューを開いたままにする方法を教えてください。

ベストアンサー

Java script でのツリーメニューの表示非表示について

2008/07/12 11:43

まったくのJavascript 初心者です。過去ログで似たようなものを見つけましたが、私には難しすぎてよくわかりませんでした。お時間があればどうぞ教えてください。ツリーメニューを作りたいと思っています。大分類をクリックすると、その下のカテゴリメニューを表示したり、非表示にしたりするメニューです。とりあえずこれはできるようになったのですが、その下のメニューをクリックして、他のページに移動すると、元通り、すべてのカテゴリメニューがリセットされて閉じてしまっています。リンクで移動しても、カテゴリメニューが開いたままにしたいのですが、どうしてもできません。ソースは以下のとおりです。初心者で本当に申し訳ありませんが、どうぞ教えてください。よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang=ja dir=ltr xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css" /> <SCRIPT language=JavaScript>  </SCRIPT> </head> <body leftmargin="0" topmargin="0" class="bg1"> <table width="150" align="left" cellpadding="0" cellspacing="0"> <tr> <td height="5"></td> </tr> <tr> <td height="30"><a onclick="OpenCategory('folder5'); return false;" href="#">大分類</a></td> </tr> <tr > <td > <div class="folder5" id="folder5" style="DISPLAY: none"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr height="18"> <td height="18">L</td> <td><p><a href="test2.htm" target="_self" >メニュー１</a></p></td> </tr> <tr height="18"> <td height="18">L</td> <td><a href="test3.htm" target="_parent" >メニュー２</a></td> </tr> <tr height="18"> <td height="18">L</td> <td><a href="test4.htm" target="_parent" >メニュー３</a></td> </tr> <tr height="18"> <td height="18"> </td> <td> </td> </tr> </table> </div></td> </tr> </table> あいうえお </body> </html>

himahima_san
お礼率44% (13/29)

JavaScript
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

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

ベストアンサー

OKbokuzyo
ベストアンサー率43% (130/296)

2008/07/13 23:36 回答No.2

>> 実はこのプログラムは、人のものをそのままコピーしただけなんです。念のためですが、著作権者の了解は得ているのでしょうか？まだ微妙な問題ではありますが、ソースコードにも著作権が発生します。 Webページはその性質上、ソースコードを隠すことは困難であり、公開が原則となりますがだからといって著作権者に了解無く、他者に公開していいものではありません。今回のようなソースコードくらいでは、いちいちどーのこーの言う人はいないと思いますが今後ご自身のために気をつけるようにした方が良いかと思います。ご理解されている上で投稿されていらっしゃるなら出しゃばりました。スルーしてください。 >> Javaに関する記述はこれしかないのですが、 JavaScriptとJavaは名称こそ似ていますが全く別物です。質問者様がプログラムを始めたばかりの方なら「細かいなぁ」くらい思うかもしれませんがこれは勘違いを防ぐためにも必ず使い分けてください。ただの誤字なら失礼しました。スルーしてください。 >> そのサイトはうまくメニューが開いたままになっているんです。 jsファイルが他にないのであれば、CGIなどサーバサイドで制御しているのだと思われます。 >> 私もわからないなりに、Cookieに >> document.cookie=n+"=0; expires=Thu, 1-1-2099 0:0:0; path=/;"; >> で保存しているのかなとは思うのですが、、、保存はしていますが、質問の例文を眺めていると保存したクッキーを読み出している箇所が見当たらない、という意味です。クッキーにフラグはセットしているのですからあとはクッキーに保存したフラグを取り出して画面表示を変更する関数を作成し、それを画面表示時に呼び出すようにすれば良いだけです。

質問者

お礼 2008/08/18 10:21

いろいろとご教授いただき、ありがとうございました。

その他の回答 (1)

OKbokuzyo
ベストアンサー率43% (130/296)

2008/07/12 11:57 回答No.1

クッキーから何もデータを読み出していないように見えますが‥？

質問者

お礼 2008/07/12 19:20

早速のご回答ありがとうございます。実はこのプログラムは、人のものをそのままコピーしただけなんです。（まったく知識がないものですから）何度そのプログラムを見ても、Javaに関する記述はこれしかないのですが、そのサイトはうまくメニューが開いたままになっているんです。私もわからないなりに、Cookieに document.cookie=n+"=0; expires=Thu, 1-1-2099 0:0:0; path=/;"; で保存しているのかなとは思うのですが、、、もっと勉強が必要ですね。すいませんでした。

関連するQ&A

ツリーメニューについて
Java Scriptのあいうえおを学んでいる最中の超初心者です。以下のツリーメニューを作成しています。親メニュー（画像2枚）クリックしたらon画像⇒子メニュー（テキスト）表示。また親メニュークリックしたらoff⇒子メニュー非表示。しかし、私が作ったツリーメニューはデフォルト（html）で強制的に開いているためか、メニューを3回ぐらいクリックしないと閉じません。手っ取り早い処置を望んでいます。ソースは以下のとおりです。【htmlソース】 <table border="0"> <tr><td><a href="javascript:localMenu('localMenu02');"><img src="imgs/on.gif" name="localMenu02Icon"></a></td></tr> <tr><td id="localMenu02" style="display:block;"> <table border="0"> <tr><td><img src="imgs/a.gif" broder="0"><a href="a.html">ＡＢＣ</a></td></tr></table></td></tr></table> 【Java Scriptソース】 function localMenu(lyName){ if(!document.getElementById){return;} if(loadFlag != 'true'){return;} if(lMenuStockID == lyName){ document.getElementById(lyName).style.display = 'none'; document.images[lMenuStockID + 'Icon'].src = document.images[lMenuStockID + 'Icon'].src.replace('_on.','_of.'); lMenuStockID = 'noData'; return; }else if(lMenuStockID != 'noData'){ document.getElementById(lMenuStockID).style.display = 'none'; document.images[lMenuStockID + 'Icon'].src = document.images[lMenuStockID + 'Icon'].src.replace('_on.','_of.'); lMenuStockID = 'noData'; } document.getElementById(lyName).style.display = 'block'; document.images[lyName + 'Icon'].src = document.images[lyName + 'Icon'].src.replace('_of.','_on.'); lMenuStockID = lyName; } 上記のソースにデフォルトでオープンしてるかしてないかのフラグを追加しなければならないのですがフラグの書き方がわかりません。勉強不足は十分に承知です。お時間がある方、フラグを教えていただけませんでしょうか？何卒よろしくお願いいたします。
- ベストアンサー
- JavaScript
【ツリーメニューの保持】
【ツリーメニューの保持】１．フォーム内の「タイプ」のラジオボタンをどれか1つ選択すると該当のツリーメニューが表示される 2．・必要項目を入力し、form送信、POSTで受け取る。 3.・form送信後も表示されていたツリーメニューを保持ということを実装したいと思っています。 javascriptは初心者で、ネットで調べてつくりました。「ラジオボタン選択でツリー表示」はできましたが「form送信後も表示されていたツリーメニューを保持」部分が実装できません。一人ではどうしても解決できず、どなたかご教授いただけませんでしょうか？よろしくお願い致します。 ------------------------------------------------------------------------------ 【php】 if($_REQUEST["mode"] == "regist") { var_dump($_REQUEST); } 【javascript】 //送信後もツリーメニュー保持 function check() { if (document.fm.type[0].checked == true) { document.getElementById('A').style.display = "block"; } else if(document.fm.type[1].checked == true) { document.getElementById('B').style.display = "block"; } } //ラジオボタン選択でツリーメニュー表示 function treeMenu(tName) { radio = document.getElementsByName('type') if(radio[0].checked) { document.getElementById('A').style.display = "block"; document.getElementById('B').style.display = "none"; } else if(radio[1].checked) { document.getElementById('A').style.display = "none"; document.getElementById('B').style.display = "block"; } 【form】 <form action="hogehoge.php" method="post" name="fm"> <input type="hidden" name="mode" value="regist"> <table> <tr> <td>タイプ</td> <td> <input type="radio" name="type" value="1" onClick="treeMenu('A')"> <input type="radio" name="type" value="2" onClick="treeMenu('B')"> </td> </tr> </table> <div id="A"> <table> <tr> <td>住所</td> <td><input type="text" name="address" value="<?php echo $_REQUEST[address]?>"></td> </tr> </table> </div> <div id="B"> <table> <tr> <td>電話番号</td> <td><input type="text" name="tel" value="<?php echo $_REQUEST[tel]?>"></td> </tr> </table> </div> <table> <tr> <td>年齢</td> <td><input type="text" name="age" value="<?php echo $_REQUEST[age]?>"></td> </tr> </table> <input type="submit" value="確認" onclick="check()"> </form>
- ベストアンサー
- JavaScript
オンマウスでプルダウンメニューを作りたいのですが？
オンマウスでプルダウンメニューを作りたいのですが、作って見た所表示はしますが、消えません。それと、横に同様なメニューを作る場合の方法を申し訳ありませんが教えてください　以下がソースです。 <HTML> <HEAD> <TITLE>メニュー</TITLE> </HEAD> <BODY> <A href="#" onMouseover="window['table'].style.display='none'" onMouseout="window['table'].style.display=''"> ●●情報</A> <TABLE id="table" border="1" style="display:" align="left" cellpadding="0" cellspacing="0" width="180"> <TR> <TD CLASS="td9" COLSPAN="3" ALIGN="left"><a href="http://www.goo.ne.jp"></a>●●</TD> </TR> <TR> <TD CLASS="td9" COLSPAN="3" ALIGN="left">▲▲</TD> </TR> </TABLE> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト
DHTML ツリーメニュー　＊　教えてください！
こんにちは。デザイナーなんですが、DHTMLツリーメニューを作っています。ウェブ上でソースを見つけて、いじくってみているんですが、上手くいきません。どなたかご存知でしたら、教えてください。作ろうとしているメニューはメルシー３ ├メルシー３の特徴 ├メルシー３の仕組 ├メルシー３の償還例 └お申込メモ/運用レポートメルシー４ ├メルシー４の特徴 ├メルシー４の仕組 ├メルシー４の償還例 └お申込メモ/運用レポート。。というかんじで、メルシー３、４をクリックすると、詳細メニュがツリーメニューで見れるというものです。＊問題は＊＊＊ほかの項目をクリックすると開いていた項目が閉じるようにしたいのです。今のままだと、一度クリックして開けてしまうと、他の項目をクリックしても、開いたままになっています。例えば、すべての項目が閉じている状態からはじめます。メルシー３をクリックすると、ツリーメニューで次の断層のリンクが出てきます。メルシー４をクリックすると、今の状態ではメルシー３が開いたまま、メルシー４が開いてしまいます。これをデフォルトで１つの項目しか開かないようにしたいのです。スクリプトの現状は以下のようになっています。 <script type="text/javascript"><!-- if (document.getElementById) document.write('<style type="text/css"> .tree { display: none; }<'+'/style>'); function tree(id) { if (document.getElementById(id).style.display == "block") document.getElementById(id).style.display="none"; else document.getElementById(id).style.display="block"; parent.contents.open(id+".html","contents") } と定義して <tr> <td id="sub"> <a href="javascript:tree('contents/mercy3');" title="クリックでメニューが開閉します">メルシー３</a><br></td> </tr> <td> <div id="contents/mercy3" class="tree"> ├<a href="#" target="contents">メルシー３の特徴 </a><br> ├<a href="未設定" target="contents">メルシー３の仕組 </a><br> ├<a href="未設定" target="contents">メルシー３の償還例 </a><br> └<a href="未設定" target="contentss">お申込メモ/運用レポート </a></div></td> </tr> <tr> <td id="sub"> <a href="javascript:tree('contents/mercy4');" title="クリックでメニューが開閉します">メルシー４</a><br></td> </tr> <tr> <td> <div id="contents/mercy4" class="tree"> ├<a href="#" target="contents">メルシー４の特徴 </a><br> ├<a href="未設定" target="contents">メルシー４の仕組 </a><br> ├<a href="未設定" target="contents">メルシー４の償還例 </a><br> └<a href="未設定" target="contentss">お申込メモ/運用レポート </a></div></td> </tr> とボディーで記述しています。どなたか、ご存知でしたら、よろしくお願いいたします。
- 締切済み
- JavaScript
プルダウンメニューを表の中に入れるには？
下記のソースに表記されているプルダウンメニューを同じく下記に表記されている表の中に埋め込むにはどうしたら良いのでしょうか？ご存知の方がいらっしゃいましたら、教えていただけると大変ありがたいです。宜しくお願いします。 <html> <head> <title></title> <style>  </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">サブメニュー１</A><br> <A class="SubMenu" href="submenu2.html">サブメニュー２</A><br> <A class="SubMenu" href="submenu3.html">サブメニュー３</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
折りたたみ（ツリー式？）メニューについて教えて下さい。
本を参考にして作ってみて、いちおう折りたたみができるようにはなったのですが一つ困っている事があります。フレームを使って左右にページを分けて、左側をメニューにしています。その左側の折りたたみメニューなのですが項目をクリックして右側にページを表示させると、元に戻ってしまいます。私は一度開いたら自分でもう一度クリックするまで勝手に折りたたまれないメニューを作りたいのです。現時点では<HEAD>部分に↓これが入っていて <script language="JavaScript"></script> <body>の部分に↓これを入れています <table border="0" onClick="tblMenu(this)"> <thead><tr><th align="left"> <img src="****.gif"></th></tr></thead> <tbody style="display:none"> <tr><td><a href="**.html" target="body">項目</a></td></tr> ・・・こんな具合なのですが、これのどこかを直したら勝手に折りたたまれないようになりますか？もしくは、自分でクリックするまで勝手に折りたたまれたりしない折りたたみメニューの作り方をご存知の方がいましたら是非教えて下さい。よろしくお願いします。
- ベストアンサー
- CSS
メニューボタン
ホームページ作成初心者です。よろしくお願いします。メニューボタンのことで質問させてください。テーブルにて横方向にボタン画像を並べました。ボタン画像はスタイルシートで指定しております(リンクテキストは別) <html> <head> <style type="text/css"></style> </head> <body> <table> <tr> <td class="td1"><a href="">トップページ</a></td> <td class="td1"><a href="">次のページ</a></td> <td class="td1"><a href="">その次のページ</a></td> </tr> </table> </body> </html> このような場合で、リンクもしくはボタン画像にマウスポインタを乗せると画像が入れ替わるというようなことは出来ますか？もし、お分かりの方がいましたら教えて下さい。宜しくお願いします。
- ベストアンサー
- HTML
Netscape4でスタイルシートを設定すると、スクリプトが動作しません。
お世話になっています。現在、スタイルシートのvisibility属性を利用してリンクをクリックすると、見えなかったテーブルを表示させる、というサンプルを作っています。しかし、テーブル内にスタイルシートの設定を入れた途端、Netscape4のみ動作しなくなりました。（「#この部分が～」のところです）原因が分かれば、教えていただきたいと思います。ソースは次の通りです。 function hyoji(lay){ if(document.getElementById) { document.getElementById(lay).style.visibility = 'visible'; } else if(document.all) { document.all(lay).style.visibility = 'visible'; } else if(document.layers) { document.layers[lay].visibility = 'show'; } } <A HREF="javascript:hyoji('test0')">ZERO</a>　 <A HREF="javascript:hyoji('test1')">ONE</a> <A HREF="javascript:hyoji('test2')">TWO</a> <div id = "test0" style="position:absolute; top:100px; left:100px ;visibility:hidden"> <table border=3> <tr> <td bgcolor=teal>ZERO</td> </tr></table></div> <div id = "test1" style="position:absolute; top:200px; left:100px ;visibility : hidden"> <table border=3> <tr><td bgcolor=hotpink> #この部分が問題？ <span style="line-height:120%">ONE</font></td> </tr></table></div> <div id = "test2" style="position:absolute; top:150px; left:100px; visibility : hidden"> <table border=3> <tr><td bgcolor=hotpink>TWO</td></tr> </table> </div>
- ベストアンサー
- JavaScript
同ページ内リンクでの画像表示について
同じページ内にテーブルを一個ずつ作ります。１つはメニュー欄、もう１つは表示欄。メニュー欄のテーブルからクリックして表示欄のテーブルに画像を表示したいのですがうまくいきません。 <TABLE border="1"> <TR><TD> <A href="http://www.geocities.jp/deepv8/gazou/G_AW.gif#hyoji2">表示</A> </TD></TR> </TABLE> <br> <TABLE border="1" width="300" height="300"> <TR><TD> <A name="hyoji2" href=""></A> </TD></TR> </TABLE> どこが間違っているのでしょうか？ご教示の程宜しくお願いします・・・m(_ _)m
- ベストアンサー
- ホームページ作成ソフト
ホームページ作成　ツリーメニュー
ホームページビルダー15を使っています。タグ（ｈｔｍｌ）の位置が無効です。と構文エラーが出てしまいます。エラー箇所は、<body> です。どこを修正すればいいでしょうか？？解決法を教えてください。初心者ですので、わかりやすく教えていただければ有難いです。 <html> <head> <title>階層メニュー</title> <SCRIPT Language="JavaScript">  </SCRIPT> </head> <body> <a href="JavaScript:void(0)" onClick="myMenu('M1');return false">CD</a><br> <span id="M1" style="display:none"> ├<a href="test_page1.html">新品ＣＤ</a><br> └<a href="test_page1.html">中古ＣＤ</a><br> </span> <br> <a href="JavaScript:void(0)" onClick="myMenu('M2');return false">DVD</a><br> <span id="M2" style="display:none"> ├<a href="test_page1.html">メニュー４</a><br> ├<a href="test_page1.html">メニュー５</a><br> └<a href="test_page1.html">メニュー６</a><br> </span> <br> <a href="JavaScript:void(0)" onClick="myMenu('M3');return false">VHS</a><br> <span id="M3" style="display:none"> ├<a href="test_page1.html">メニュー７</a><br> ├<a href="test_page1.html">メニュー８</a><br> └<a href="test_page1.html">メニュー９</a> </span> </body> </html>
- ベストアンサー
- ブログ