折りたたみメニュー3

下のリンクをクリックするとリストになったメニューが出現し、もう一度クリックすると引っ込みます。 この例ではJavaScriptがオフの場合にそのメニューのある別ページにジャンプします。 クッキーを使って折りたたみの開閉状態を記憶しているので、他のページからこのページに戻ったときも飛ぶ前と同じ開閉状態のままです。

自作JavaScriptサンプル

よくあるJavaScriptサンプル


<head>
<script type="text/javascript"><!--

function getCookie(){		//クッキーを取り出す関数
tmp = document.cookie + ";";
index1 = tmp.indexOf("hyoji",0);
if(index1 != -1){
	tmp = tmp.substring(index1,tmp.length);
	index2 = tmp.indexOf("=",0) + 1;
	index3 = tmp.indexOf(";",index2);
	return(unescape(tmp.substring(index2,index3)));
	}
else return ("00");	//子メニューの数だけ0を増やす
}

function setCookie(val){	//クッキーをセットする関数
	myExp = new Date();
	myExp.setTime(myExp.getTime()+(365*24*60*60*1000));
	tmp = "hyoji=" + escape(val) + ";";
	tmp += "expires=" + myExp.toGMTString();
	document.cookie = tmp;
}

function oritatami(id){		//クリックしたときに動作する関数
	state = getCookie();
	cli = id.substring(1,2);	//クリックされたidの番号を取得
	hai = state.match(/[01]/g);	//0か1にmatchさせて配列にする
	obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null);
	if(obj)	obj.style.display=(hai[cli]=="0")?"block":"none";
	hai[cli] = "" + ((eval(hai[cli]))^1);	//クリックされた部分の0か1を反転
	state = "";	//いったん空にする
	for(i=0;i<hai.length;i++) state += hai[i];	//stateに再び0と1の状態を格納
	setCookie(state);
}

function syoki(){	//画面が表示されたときに開閉状態をセットする関数
	state = getCookie();
	hai = state.match(/[01]/g);
	for(i=0;i<hai.length;i++){
		obj=(document.all)?document.all('o'+i):((document.getElementById)?document.getElementById('o'+i):null);
		if(obj)	obj.style.display=(hai[i]=="0")?"none":"block";
		}
}

//--></script>
</head>

<body onload="syoki()">

<a href="URL" onclick="oritatami('o0');return false">メニュー1</a>
<div id="o0">
<ul>
<li><a href="URL">項目1</a>
<li><a href="URL">項目2</a>
<li><a href="URL">項目3</a>
</ul>
</div>

<a href="URL" onclick="oritatami('o1');return false">メニュー2</a>
<div id="o1">
<ul>
<li><a href="URL">項目1</a>
<li><a href="URL">項目2</a>
<li><a href="URL">項目3</a>
<li><a href="URL">項目4</a>
</ul>
</div>

<!--子メニューのidはo0,o1,o2と増やしていって、onclick="oritatami('')"の括弧内の'と'の間とdiv id=""の"と"の間に書いていきます。
getCookie関数の最後のelse return ("00");の部分の0の数をidの数と同じにします。-->
</body>

HOMEMENU