折りたたみメニュー4(メニューが2桁以上の場合にも対応)

下のリンクをクリックするとリストになったメニューが出現し、もう一度クリックすると引っ込みます。 この例ではJavaScriptがオフの場合にそのメニューのある別ページにジャンプします。 クッキーを使って折りたたみの開閉状態を記憶しているので、他のページからこのページに戻ったときも飛ぶ前と同じ開閉状態のままです。 2桁以上に対応するためにoritatami関数内のsubstringメソッドの第2引数を省略しました。 クッキーの管理がおかしくならないように、クッキーの名前を「折りたたみメニュー3」とは別にしています。

メニュー1

メニュー2

メニュー3

メニュー4

メニュー5

メニュー6

メニュー7

メニュー8

メニュー9

メニュー10

メニュー11

メニュー12


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

function getCookie(){
tmp = document.cookie + ";";
index1 = tmp.indexOf("hyoji2",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 ("000000000000");	//12個
}

function setCookie(val){
	myExp = new Date();
	myExp.setTime(myExp.getTime()+(365*24*60*60*1000));
	tmp = "hyoji2=" + escape(val) + ";";
	tmp += "expires=" + myExp.toGMTString();
	document.cookie = tmp;
}

function oritatami(id){
	state = getCookie();
	cli = id.substring(1);	//クリックされたidの番号を取得、2桁以上に対応するため第2引数を省略
	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>
</ul>
</div>

<a href="URL" onclick="oritatami('o2');return false">メニュー3</a>
<div id="o2">
<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('o3');return false">メニュー4</a>
<div id="o3">
<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('o4');return false">メニュー5</a>
<div id="o4">
<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('o5');return false">メニュー6</a>
<div id="o5">
<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('o6');return false">メニュー7</a>
<div id="o6">
<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('o7');return false">メニュー8</a>
<div id="o7">
<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('o8');return false">メニュー9</a>
<div id="o8">
<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('o9');return false">メニュー10</a>
<div id="o9">
<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('o10');return false">メニュー11</a>
<div id="o10">
<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('o11');return false">メニュー12</a>
<div id="o11">
<ul>
<li><a href="URL">項目1</a>
<li><a href="URL">項目2</a>
<li><a href="URL">項目3</a>
</ul>
</div>

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

HOMEMENU