こちらのサイトの↓
http://f32.aaa.livedoor.jp/~azusa/index.php?t=js …
開閉式ツリー型メニュー(ロールオーバーあり)を参考にメニューを作ったのですが、
リンク先へ飛ぶと元の畳まれたメニューになってしまうのです。
クリックをしてメニューが開いた状態を保ちながら
次のページにも反映される様にするにはどうしたら良いでしょうか?
ジャバもクッキーも調べてみたのですが、どうにも初心者の私には難しくて理解が困難でした;
誰かお願いいたします。
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>
遅くなりまして申し訳ないです。
こんなに丁寧に記述して頂きましてありがとうございます。
これで何とか前に進めそうです。
本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- マナー・文例 子どもの美容室 予約優先制のキッズ美容室でウェブ予約のページを見たら全体カットのメニューしかありませ 1 2022/03/30 00:25
- デスクトップパソコン PCでファイルを右ドラッグして出てくるメニューの編集方法を教えて下さい 2 2023/01/17 13:31
- 飲食店・レストラン 飲食店で食べ物を選ぶのに時間をかける友人。男です。例えばレストランでメニューを選ぶ際、私は30秒あれ 3 2022/10/15 08:14
- レシピ・食事 皆さんの食べたい(好きな)夕飯のおかずを、三つあげてください! 後でこれを参考に、 お料理下手な私が 23 2022/08/31 19:11
- 教えて!goo 教えてgoo 5 2023/06/20 14:55
- レシピ・食事 減塩メニューをスマホで捜していますが、無料で、見られる物はないのでしょうか? メニューに、カロリー、 4 2022/06/21 19:16
- ダイエット・食事制限 ローファットダイエットについてアドバイスをください。 現在、体脂肪率が28で肥満1型になった旦那のダ 1 2022/09/03 09:06
- Visual Basic(VBA) 条件に一致した場合の処理 2 2022/10/18 06:30
- Access(アクセス) Accessで独自メニューバーまたはリボンを作成したい 1 2022/12/02 14:31
- 筋トレ・加圧トレーニング 高校生女子です。 私は一年ほど前から自宅で腹筋トレーニングをしているんですが、なかなかメニューを安定 2 2022/10/06 14:22
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryでシンセサイザーを作っ...
-
二次元配列を使って順位をだす...
-
プログラミング 学習
-
Cookieに保存されない
-
API連携のプログラミングについ...
-
ジャバスクリプトについて。
-
オブジェクトから任意のプロパ...
-
スマホ上で、左右スワイプで次...
-
追加ボタンを押した際に ok ボ...
-
HTMLでサブフレームから親のス...
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
iOSのみダブルタップが必要
-
jsで質問です。 displayプロパ...
-
var exports = exports || {}; ...
-
HTMLタグに複数のクラスを設定...
-
Googleフォームで選択肢に応じ...
-
変数名をどのようにつけるのが...
-
ボタンを押したあとに画像を表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
「jQuery」アコーディオンメニ...
-
javascript テキストエリアを1...
-
jquery ドロップダウンメニュー...
-
jQueryでネスト構造の<li>がク...
-
クリックした<a>タグのみにClas...
-
jQueryの配列の渡し方について
-
for(var i=0;...) の i の値を...
-
JavaScriptによる疑似プルダウ...
-
jQueryのeqで最後からn番目以降...
-
javascriptでEnterキーをtabキ...
-
Jquery タブで、4つのliのうち...
-
【javascript で動的に a タグ...
-
どの<li><a> が押されたか判別...
-
マウスオーバーで開閉できるア...
-
同一ページ内で、任意の文字列...
-
jqueryプルダウンメニュー個別着色
-
JavaScript インクリメントの書...
-
複数の画像をランダム(シャッ...
-
タブ切り替えの初期表示について
おすすめ情報