• 締切済み

ツリーメニューでクッキーを使いたいのですが・・

JavaScript初心者です。ツリーメニューを使いたいのですが、リンクから別のページ（別のディレクトリ）に移動した時、クッキーを使って、展開した状態を保持したいのですが、よく分かりません。 enptybox22さんの http://oshiete.homes.jp/qa3084680.html 回答記事にあったクッキー処理のプログラムをそのまま入れてみたのですがうまく動きません。 設置URLは http://blove.cc/tes1/ になります。 どうぞよろしくお願いいたします。

みんなの回答

noname#84373
noname#84373
回答No.6

<html>が余計だった。

全文を見る
すると、全ての回答が全文表示されます。
noname#84373
noname#84373
回答No.5

答えようかどうか迷ったが答ええることにしました まず</li>が抜けていること。それが問題の解決ではないけど・・・ <ul>を開くとき、その子Nodeが開いているかもCookieに保存することにした 解説など無意味だと思うが、一応。 キャッシュ？クッキーの保存状態を自分で観察してください。 <?xml version="1.0" encoding="shift_jis"?><!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" xml:lang="ja" lang="ja" dir="ltr"> <head profile="http://happy.am/"> <meta content="text/html; charset=Shift_JIS" http-equiv="Content-Type" /> <title></title> <meta content="ja" http-equiv="Content-Language" /> <meta content="text/css" http-equiv="Content-Style-Type" /> <meta content="text/javascript" http-equiv="Content-Script-Type" /> <style type="text/css"><!-- ul { list-style-type:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } --></style> <html> <body> <ul id="a" style="display:none"> <li>A <ul> <li><a href="http://blove.cc/tes1/">A-1</a></li> <li>A-2 <ul> <li><a href="http://blove.cc/tes1/">ページ1へ飛ぶ</a></li> <li><a href="http://blove.cc/tes2/">ページ2へ飛ぶ</a></li> </ul> </li> <li>A-3 <ul> <li><a href="http://blove.cc/tes1/">ページ1へ飛</a></li> <li><a href="http://blove.cc/tes2/">ページ2へ飛ぶ</a></li> </ul> </li> </ul> </li> <li>b <ul> <li><a href="http://blove.cc/tes1/">ページ1へ飛ぶ</a></li> <li><a href="http://blove.cc/tes2/">ページ2へ飛ぶ</a></li> </ul> </li> </ul> <script> window.onload=function(){ openTreeMenu('a');} window.document.onclick=chkClick; function chkClick(e){ var f=true; var obj = e?e.target:event.srcElement; if(obj.tagName!='LI') return; saveCookie('li',getFirstText(obj),10); saveCookie('lic',getChildUL(obj),10); if(f) openTreeMenu('a'); else { var sobj = obj.firstChild; while(sobj.nodeName!='UL'){ sobj=sobj.nextSibling; if(!sobj) return;} sobj.style.display=(sobj.style.display=='none')?'block':'none'; } } function openTreeMenu(id,text,f){ var obj = document.getElementById(id), objs=obj.getElementsByTagName('ul'); for(var i=0,m=objs.length;i<m;i++) objs[i].style.display = 'none'; if(text==undefined) text = loadCookie('li'); if(f==undefined) f=loadCookie('lic')-0; if(text){ var objs = obj.getElementsByTagName('li'); for(var i=0,m=objs.length;i<m;i++){ if(getFirstText(objs[i])==text){ var t=objs[i]; do{t=t.parentNode; if(t.nodeName=='UL') t.style.display='block';} while(t.nodeName!='BODY'); if(!f){ var t=objs[i].firstChild; while(t){if(t.nodeName=='UL') t.style.display='block';t=t.nextSibling;} } } } } obj.style.display='block'; } function getFirstText(obj){var nd=obj.firstChild;while(nd.nodeName!='#text'){nd=nd.nextSibling; if(!nd) return false;}return nd.nodeValue;} function getChildUL(obj){var t=obj.firstChild; while(t){if(t.nodeName=='UL') if(t.style.display=='block')return 1;t=t.nextSibling;}return 0;} function saveCookie( vn, v, dy ){ if(navigator.cookieEnabled) document.cookie=vn+'='+escape(v)+ ';expires='+new Date((new Date()).getTime()+dy*86400000).toGMTString();} function loadCookie(vn){ var r = '',o = document.cookie.split('; '); for (var i in o){ var c = o[i].split('='); if (c[0]==vn && c[1]!=''){ r = c[1]?unescape(c[1]):'';break; }} return r;} </script> </body> </html>

全文を見る
すると、全ての回答が全文表示されます。
noname#84373
noname#84373
回答No.4

まちがえた！ <html> <body> <ul id="a" style="display:none"> <li>A <ul> <li>A-1</li> <li>A-2 <ul> <li>A-2-1</li> <li>A-2-2</li> </ul> </li> </ul> </li> <li>b <ul> <li><a href="htp:?www.">world</a></li>? <li>b-2</li> </ul> </li> </ul> <script> window.onload=function(){ openTreeMenu('a');} window.document.onclick=chkClick; function openTreeMenu(id,text){ var obj = document.getElementById(id), objs=obj.getElementsByTagName('ul'); for(var i=0,m=objs.length;i<m;i++) objs[i].style.display = 'none'; if(text==undefined) text = loadCookie('li'); if(text){ var objs = obj.getElementsByTagName('li'); for(var i=0,m=objs.length;i<m;i++){ if(getFirstText(objs[i])==text){ var t=objs[i]; do{t=t.parentNode; if(t.nodeName=='UL') t.style.display='block';} while(t.nodeName!='BODY'); var t=objs[i].firstChild; while(t){if(t.nodeName=='UL') t.style.display='block';t=t.nextSibling;} } } } obj.style.display='block'; } function chkClick(e){var obj = e?e.target:event.srcElement;if(obj.tagName!='LI') return;var text=getFirstText(obj); saveCookie('li',text,10); openTreeMenu('a',text);} function getFirstText(obj){var nd=obj.firstChild;while(nd.nodeName!='#text'){nd=nd.nextSibling; if(!nd) return false;}return nd.nodeValue;} function saveCookie( vn, v, dy ){ if(navigator.cookieEnabled) document.cookie=vn+'='+escape(v)+ ';expires='+new Date((new Date()).getTime()+dy*86400000).toGMTString();} function loadCookie(vn){ var r = '',o = document.cookie.split('; '); for (var i in o){ var c = o[i].split('='); if (c[0]==vn && c[1]!=''){ r = c[1]?unescape(c[1]):'';break; }} return r;} </script> </body> </html>

piyo003
質問者

お礼

どうもありがとうございます！ 設置してみました。 http://blove.cc/tes1/ キャッシュですが、正常に取得できない場面があります。 ツリーの動作ですが、Aを開いてAをクリックしたら閉じたいのですが、閉じれません。 たびたび申し訳ありません。どうぞよろしくお願いいたします。

全文を見る
すると、全ての回答が全文表示されます。
noname#84373
noname#84373
回答No.3

う～～んわがままだなぁ～改造する気にはならんのかな <html> <body> <ul id="a" style="display:none"> <li>A <ul> <li>A-1</li> <li>A-2 <ul> <li>A-2-1</li> <li>A-2-2</li> </ul> </li> </ul> </li> <li>b <ul> <li><a href="htp:?www.">world</a></li>? <li>b-2</li> </ul> </li> </ul> <script> window.onload=function(){ openTreeMenu('a');} window.document.onclick=chkClick; function openTreeMenu(id,text){ var obj=document.getElementById(id),objs=obj.getElementsByTagName('ul'); for(var i=0,m=objs.length;i<m;i++) objs[i].style.display='none'; if(!text)text=loadCookie('li'); if(text) for(var i=0,m=objs.length,objs = obj.getElementsByTagName('li');i<m;i++) if(getFirstText(objs[i])==text){ var t=objs[i];do{t=t.parentNode; if(t.nodeName=='UL') t.style.display='block';} while(t.nodeName!='BODY'); var t=objs[i].firstChild;while(t){if(t.nodeName=='UL') t.style.display='block';t=t.nextSibling; } } obj.style.display='block'; } function chkClick(e){var obj = e?e.target:event.srcElement;if(obj.tagName!='LI') return;var text=getFirstText(obj); saveCookie('li',text,10); openTreeMenu('a',text);} function getFirstText(obj){var nd=obj.firstChild;while(nd.nodeName!='#text'){nd=nd.nextSibling; if(!nd) return false;}return nd.nodeValue;} function saveCookie( vn, v, dy ){ if(navigator.cookieEnabled) document.cookie=vn+'='+escape(v)+ ';expires='+new Date((new Date()).getTime()+dy*86400000).toGMTString();} function loadCookie(vn){ var r = '',o = document.cookie.split('; '); for (var i in o){ var c = o[i].split('='); if (c[0]==vn && c[1]!=''){ r = c[1]?unescape(c[1]):'';break; }} return r;} </script> </body> </html>

全文を見る
すると、全ての回答が全文表示されます。
noname#84373
noname#84373
回答No.2

やっぱりまた訂正があった。38行目付近 var text = loadCookie('li'); を if(text==undefined) text = loadCookie('li'); に、 影響はないのですが・・・。

piyo003
質問者

お礼

どうもありがとうございます！ ソースも<li>と<ul>を使っていて理想的です！ ただ、ちょっと試したところ、元の設置URLのように 自閉式ではないような気がします・・。 開き方、閉じ方は、設置URLのようにしたいのですが。 申し訳ありません。どうぞよろしくお願いいたします。

全文を見る
すると、全ての回答が全文表示されます。
noname#84373
noname#84373
回答No.1

ちょっと興味があったので、自分的な考え方でやってみた <ul>と<li>の入れ子構造に違いがあります。 <li>～</li>部分の最初のテキストノードをクッキーに保存してます 読み込んだときは、そのテキストを探し、親の方にULがあれば 展開するように、そしてその子ノードのULを開いています たぶん３段でも４段でもいけるような気がしますが、微妙・・。 <html> <body> <ul id="a" style="display:none"> <li>A <ul> <li>A-1</li> <li>A-2 <ul> <li>A-2-1</li> <li>A-2-2</li> </ul> </li> </ul> </li> <li>b <ul> <li><a href="htp:www.">world</a></li> <li>b-2</li> </ul> </li> </ul> <script> window.onload=function(){ openTreeMenu('a');} window.document.onclick=chkClick; function chkClick(e){ var obj = e?e.target:event.srcElement; if(obj.tagName!='LI') return; saveCookie('li',getFirstText(obj),10); var sobj = obj.firstChild; while(sobj.nodeName!='UL'){ sobj=sobj.nextSibling; if(!sobj) return;} sobj.style.display=(sobj.style.display=='none')?'block':'none'; } function openTreeMenu(id,text){ var obj = document.getElementById(id), objs=obj.getElementsByTagName('ul'); for(var i=0,m=objs.length;i<m;i++) objs[i].style.display = 'none'; var text = loadCookie('li'); if(text){ var objs = obj.getElementsByTagName('li'); for(var i=0,m=objs.length;i<m;i++){ if(getFirstText(objs[i])==text){ var t=objs[i]; do{t=t.parentNode; if(t.nodeName=='UL') t.style.display='block';} while(t.nodeName!='BODY'); var t=objs[i].firstChild; while(t){if(t.nodeName=='UL') t.style.display='block';t=t.nextSibling;} } } } obj.style.display='block'; } function getFirstText(obj){ var nd=obj.firstChild; while(nd.nodeName!='#text'){nd=nd.nextSibling; if(!nd) return false;} return nd.nodeValue; } function saveCookie( vn, v, dy ){ if(navigator.cookieEnabled) document.cookie=vn+'='+escape(v)+ ';expires='+new Date((new Date()).getTime()+dy*86400000).toGMTString();} function loadCookie(vn){ var r = '',o = document.cookie.split('; '); for (var i in o){ var c = o[i].split('='); if (c[0]==vn && c[1]!=''){ r = c[1]?unescape(c[1]):'';break; }} return r;} </script> </body> </html>

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 戻ってきた時ツリーメニューが開いているようにクッキーを保存させたい

    タイトルの通り、開いたツリーメニューからリンクを踏んで、またメニューのあるページに戻ってきた時にメニューを開いたままにしたいです。 色々と調べるうちにcookieを使うことはわかったのですが、どこもツリーメニューの方法が違うため載っているソースのどこを弄れば自分の使ったツリーメニューに対応させられるのかわかりませんでした。 javascriptを切った状態では開いたまま表示させたいので、ツリーメニューのソースは以下を参考にさせていただきました。 http://blog.ptlabo.net/index.php?id=06100064 これを利用して「戻ってきた時ツリーメニューを開いた状態に」することはできますか？ できない場合、 ・cssオン、javascriptオフの状態では開いている ・ブラウザバックしたときに開いている この条件に合うツリーメニューであれば何でも良いのでお教えいただきたいです。 初心者ですので詳細にご教授いただければ幸いです。 よろしくお願いします。

  • リンク先でツリーを展開したままに

    リンク先でツリーを展開したままに はじめまして、いつも参考にさせてもらってます。 こちらのソースをそのままコピペして自閉式ツリーメニューを作りました。 http://okwave.jp/qa/q5526156.html 動作はしましたが、メニューのリンクをクリックして他のページに行くとツリーが閉じてしまいます。 リンク先でそのメニューのツリーを展開したままにしたいのですが、できるでしょうか？ たとえばmenu1内のaaa.htmlへのリンクをクリックした場合、menu1のツリーが展開したままaaa.htmlが表示されるというようなことがしたいです。 もしだめならタイトル部分の文字色を変えるだけでもいいので、今このメニューだというのがわかるようにしたいのです。 javascriptは本当に初心者なので、わかりにくい質問ですみません。 教えてもらえると助かります。

  • ツリーメニューについて質問です。

    ツリーメニューについて質問です。 いくつかのサイトを参考にし、コピー＆ペーストでjavascriptを使ってツリーメニューを作成したのですが、ツリーメニューが展開された状態で表示されてしまいます。 閉じた状態で表示したいのですが、どうすればいいでしょうか。 ここにソースを載せようと思いましたが入りませんでしたので、載せられません。 主に参考にしたのは、このサイトです。 http://himajin.moo.jp/java/menu2.html このサイトのものに何を足せば良い、とかそのようなソースが載っているサイトがもしあれば教えてほしいです。 よろしくお願いします。 ちなみに私は超初心者です＞＜

  • ツリー式メニュー

    自分のＨＰ内にツリー式メニュ―（三段）を設置したいんですが、 クリックしていくごとに↓のように表示されるものを 作りたいんです。 ■メニュー 　┣■Ａ 　┃　┣■リンク１ 　┃　┣■リンク２ 　┣■Ｂ 　┃　┣■リンク３ 　┃　┣■リンク４ 　┃ ちなみに■部分は画像を使っています。 二段目までのツリー表示は出来るんですが…。 どなたか分かる方、お願いします。

  • ツリー型メニューの作成

    オンマウスやクリックで展開するツリー型のメニューを作成したいと思っています。それほど複雑なものは必要としませんが、CGIやjavascriptを少し書き換える程度の知識しかありません。テンプレートのようなものを使っても、実際にやるとなると微調整など必要になるため、難しいかとも思いますが、チャレンジしたいと思います。参考になるサイトやプログラムを教えてください。

  • ツリーメニューの作成

    ツリーメニューの表示ができません。 記述は以下のとおりです （ヘッダー内） メタタグで標準スクリプト指定 <meta http-equiv="Content-Script-Style" content="text/javascript"> ツリーメニューの記述(某サイトよりコピペ） <script language="JavaScript"> <!-- function ok(id){if(document.all(id).style.display == "none"){document.all(id).style.display="block";}else{document.all(id).style.display="none";}} //--> </SCRIPT> ボディ内 （実際にツリーメニューを表示させる箇所） <A HREF="JavaScript:ok('tree1');"> ■メニュー </A> <div id="tree1" style="display:none;"> ツリー１<br> ツリー２<br> ツリー３<br> </div> ///////////////////////////////////////////////////////////// こんな感じです。 以前別のＨＴＭＬファイルで、ツリーメニューをつくったときには 正常に表示（クリックすると、ずらずらと出てくる）のに、今回同じソース（というのですか？）で記述してみたら、ダメでした。 「このページは表示できません」とかなります。

  • ツリーメニューでのcookieの使用方法

    いつもお世話になっております。 毎回丁寧なご回答、本当にありがとうございます。 現在、JavaScriptを利用し、ツリーメニューを作成しているのですが、 次のページに行った際や戻った際、更新を押した際に、 先程まで開いていたツリーメニューが、閉じてしまわないように、 cookieを利用し開いた状態に保ちたいと思っております。 一応、参考になるサイトがあり出来たことは出来たのですが、 そちらの方法を利用すると上記の操作を行った際に、 全てのメニューが一瞬開いてしまう現象が起きてしまいます。 一瞬全て開いた後には先程までのメニューはちゃんと記憶され開いた状態です。 今回、この「全てのメニューが一瞬開いてしまう」といのを、 なんとか直したいと思っております。 またその他に、出来る限りのブラウザに対応させたいと思っております。 JavaScriptが有効なブラウザの場合は通常通りのツリーメニュー、 無効な場合は全てが展開された状態のメニュー等。 目標としてはPCショップのドスパラ様のようなツリーメニューにしたいと思っております。 なを、メニュー部は更新の手間等を考え、 SSIを使用しインクルードしており、外部ファイルにしております。 このJavaScriptに限らず、別なJavaScriptでも結構ですので、 具体的なサイトやJavaScript自体をお書き頂けると幸いです。 今回使用したJavaScriptを作成した作者様にも伺っているのですが、 まだ返答は得られておらず、当方でも出来る限り急ぎで対処したいため、 誠に勝手ながらこちらに質問させていただきました。 何卒宜しくお願いいたします。 なお、確認ブラウザはWinXP SP2 ＆ IE6.0とFirefox2.0とNetscape 7.1です。 一応、現在参照しているJavaScriptのページを下記に記載いたします。 http://himajin.moo.jp/menu/menu1.html

  • 開閉式ツリー型メニューについて

    こちらのサイトの↓ http://f32.aaa.livedoor.jp/~azusa/index.php?t=js&p=tips_node 開閉式ツリー型メニュー（ロールオーバーあり）を参考にメニューを作ったのですが、 リンク先へ飛ぶと元の畳まれたメニューになってしまうのです。 クリックをしてメニューが開いた状態を保ちながら 次のページにも反映される様にするにはどうしたら良いでしょうか？ ジャバもクッキーも調べてみたのですが、どうにも初心者の私には難しくて理解が困難でした； 誰かお願いいたします。

  • 【ツリーメニューの保持】

    【ツリーメニューの保持】 １．フォーム内の「タイプ」のラジオボタンをどれか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>

  • メニューをすべて展開orすべて折りたたむ をするには

    メニューをすべて展開orすべて折りたたむ をするには http://okwave.jp/qa/q4482305.html で回答されたコードを利用して、ツリーメニューを作成しています。 これに1行つけくわえて「全て展開」「全て折りたたむ」というメニューを付け加えられないでしょうか。 どなたか回答よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する