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

解決済

質問者：enptybox22
質問日時：2007/06/14 19:06
回答数：2件

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

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yambejp
回答日時：2007/06/18 12:28

ひさしぶりにちょっと気張って書いてみました。

煩雑なためcssとjsファイルを外部化してあります。
ざっと書いたのでちょこちょこ無駄な部分があるかも。
なおulにulを入れ子するときにはliで囲んだほうがプログラム的に
なにかと楽です。

・treemenu.css
#hoge ul{
padding:0px;
padding-left:20px;
}
#hoge li{
list-style:none;
margin:0px;
padding:0px;
}

・treemenu.js
function setCookie(key,val){
tmp = key+"="+escape(val)+";";
tmp += "expires=Fri, 31-Dec-2030 23:59:59;";
document.cookie = tmp;
};
function getCookie(key){
tmp = document.cookie+";";
tmp1 = tmp.indexOf(key,0);
if(tmp1 != -1){
tmp = tmp.substring(tmp1,tmp.length);
start = tmp.indexOf("=",0);
end = tmp.indexOf(";",start);
return(unescape(tmp.substring(start+1,end)));
}
return("");
};
function delCookie(key){
expiredate = new Date();
expiredate.setYear(expiredate.getYear()-1);
tmp = key+"=;";
tmp += "expires="+expiredate.toGMTString();
document.cookie = tmp;
};
//ここまでがクッキー処理（ほかでも汎用的につかえる）
no=0;
window.onload=function(){
var ie=(navigator.appName.indexOf("Microsoft") >= 0);
var hoge=document.getElementById('hoge');
hoge.setChild=setChild;
hoge.setChild();
var ulgroup=hoge.getElementsByTagName('UL');
for(var i=0;i<ulgroup.length;i++){
if(ie) ulgroup[i].style.height=0;
ulgroup[i].setChild=setChild;
ulgroup[i].setChild();
}
}

function changeImg(){
var cnode=this.childNodes;
for(var i=0;i<cnode.length;i++){
if(cnode[i].nodeName=="IMG"){
cnode[i].src=(this.dispChild==false)?"hide.gif":"show.gif";
}
}
}
function setChild(){
var cnode=this.childNodes;
var preobj=new Object;
var obj=new Object;
for(var i=0;i<cnode.length;i++){
if(cnode[i].nodeName=="LI"){
if(cnode[i].getElementsByTagName('ul').length>0){
var dispFlg= getCookie("ul") & Math.pow(2,no);
preobj.no=no++;
preobj.dispChild=dispFlg;
preobj.child=cnode[i];
preobj.changeImg=changeImg;
preobj.innerHTML="<img src='hide.gif'>"+preobj.innerHTML
if(preobj.dispChild==false) preobj.child.style.display="none";
else preobj.changeImg();
preobj.onclick=function(){
this.dispChild=(this.dispChild==false)?true:false;
if(this.dispChild==false) this.child.style.display="none";
else this.child.style.display="";
this.changeImg();
var ul=getCookie("ul") ^ Math.pow(2,this.no);
setCookie("ul",ul);
}
}
preobj=cnode[i];
}
}
}

・treemenu.htm
<html>
<head>
<title>test</title>
<script type="text/javascript" src="treemenu.js"></script>
<link rel="stylesheet" type="text/css" href="treemenu.css">
</head>
<body>
<ul id="hoge">
<li>A</li>
<li>
<ul>
<li>A-1</li>
<li>
<ul>
<li>A-1-1</li>
<li>A-1-2</li>
<li>
<ul>
<li>A-1-2-1</li>
<li>A-1-2-2</li>
<li>A-1-2-3</li>
</ul>
</li>
<li>A-1-3</li>
</ul>
</li>
<li>A-2</li>
<li>
<ul>
<li>A-2-1</li>
<li>A-2-2</li>
<li>A-2-3</li>
</ul>
</li>
<li>A-3</li>
</ul>
</li>
<li>B</li>
<li>C</li>
<li>
<ul>
<li>C-1</li>
</ul>
</li>
<li>D</li>
</ul>
</body>
</html>