- 締切済み
ツリーメニューでクッキーを使いたいのですが・・
JavaScript初心者です。ツリーメニューを使いたいのですが、リンクから別のページ（別のディレクトリ）に移動した時、クッキーを使って、展開した状態を保持したいのですが、よく分かりません。 enptybox22さんの http://oshiete.homes.jp/qa3084680.html 回答記事にあったクッキー処理のプログラムをそのまま入れてみたのですがうまく動きません。 設置URLは http://blove.cc/tes1/ になります。 どうぞよろしくお願いいたします。
- piyo003
- お礼率33% (2/6)
- JavaScript
- 回答数6
- ありがとう数6
- みんなの回答 （6）
- 専門家の回答
みんなの回答
<html>が余計だった。
答えようかどうか迷ったが答ええることにしました まず</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>
まちがえた！ <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>
う～～んわがままだなぁ～改造する気にはならんのかな <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>
やっぱりまた訂正があった。38行目付近 var text = loadCookie('li'); を if(text==undefined) text = loadCookie('li'); に、 影響はないのですが・・・。
お礼
どうもありがとうございます！ ソースも<li>と<ul>を使っていて理想的です！ ただ、ちょっと試したところ、元の設置URLのように 自閉式ではないような気がします・・。 開き方、閉じ方は、設置URLのようにしたいのですが。 申し訳ありません。どうぞよろしくお願いいたします。
ちょっと興味があったので、自分的な考え方でやってみた <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>
お礼
どうもありがとうございます！ 設置してみました。 http://blove.cc/tes1/ キャッシュですが、正常に取得できない場面があります。 ツリーの動作ですが、Aを開いてAをクリックしたら閉じたいのですが、閉じれません。 たびたび申し訳ありません。どうぞよろしくお願いいたします。