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

締切済

質問者：piyo003
質問日時：2008/10/26 11:06
回答数：6件

JavaScript初心者です。ツリーメニューを使いたいのですが、リンクから別のページ（別のディレクトリ）に移動した時、クッキーを使って、展開した状態を保持したいのですが、よく分かりません。

enptybox22さんの
http://oshiete.homes.jp/qa3084680.html
回答記事にあったクッキー処理のプログラムをそのまま入れてみたのですがうまく動きません。

設置URLは
http://blove.cc/tes1/
になります。

どうぞよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

最新から表示
回答順に表示

No.6

回答者： _pipi_
回答日時：2008/10/26 21:54

<html>が余計だった。

- 0
- 件

通報する

No.5

回答者： _pipi_
回答日時：2008/10/26 21:44

答えようかどうか迷ったが答ええることにしました

まず</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-transitio … 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"></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>

- 0
- 件

通報する

No.4

回答者： _pipi_
回答日時：2008/10/26 16:42

まちがえた！

<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>

- 0
- 件

通報する

この回答へのお礼

どうもありがとうございます！
設置してみました。
http://blove.cc/tes1/

キャッシュですが、正常に取得できない場面があります。
ツリーの動作ですが、Aを開いてAをクリックしたら閉じたいのですが、閉じれません。

たびたび申し訳ありません。どうぞよろしくお願いいたします。

通報する

お礼日時：2008/10/26 19:27

No.3

回答者： _pipi_
回答日時：2008/10/26 16:40

う～～んわがままだなぁ～改造する気にはならんのかな

<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>

- 0
- 件

通報する

No.2

回答者： _pipi_
回答日時：2008/10/26 15:24

やっぱりまた訂正があった。

38行目付近
var text = loadCookie('li');
を
if(text==undefined) text = loadCookie('li');
に、
影響はないのですが・・・。

- 0
- 件

通報する

この回答へのお礼

どうもありがとうございます！
ソースも<li>と<ul>を使っていて理想的です！

ただ、ちょっと試したところ、元の設置URLのように
自閉式ではないような気がします・・。
開き方、閉じ方は、設置URLのようにしたいのですが。

申し訳ありません。どうぞよろしくお願いいたします。

通報する

お礼日時：2008/10/26 16:09

No.1

回答者： _pipi_
回答日時：2008/10/26 15:19

ちょっと興味があったので、自分的な考え方でやってみた

<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>