ベストアンサー

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

2007/06/14 19:06

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

enptybox22
お礼率100% (6/6)

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

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

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

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2007/06/18 12:28 回答No.2

ひさしぶりにちょっと気張って書いてみました。煩雑なため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>

質問者