サブカテゴリーが開く

Index

アウトラインをクリックするとリンクのサブカテゴリーが開いたり閉じたりするサンプルです．
注：IE4.0以降のみ動作可能です．

［例］

	<head>
	<SCRIPT LANGUAGE="JavaScript">
	<!--
	function Click(){			//(1)
	var sElem = event.srcElement;
		if( "" != sElem.id ){
			var sb = sElem.id + "Sub";		//(2)
			var el = document.all[sb];
			if( null != el ) el.style.display = "none" == el.style.display ? "" : "none";	//(3)
			event.returnValue = false;
			}
		}
	}
	//-->
	</SCRIPT>
	</head>
		
	<body>
	<b><span onclick = "Click()" id="Link">リンク</span></b>	
	<div id="LinkSub" style "display:none"><br>		//(4)
	<ul>	
	<li><a href="wnew.html">Wha'ts NEW</a><
	<li><a href="JavaScript.html">JavaScript</a><
	<li><a href="links.html">Links</a><
	</ul>
	</div>
	</body>

【解説】

(1)Click()はアウトラインがクリックされると呼び出されます．
(2)サブカテゴリーのID属性．
(3)アウトラインのサブカテゴリーの表示をチェックし，表示されていないなら表示し，表示されている場合には消去する．
(4)ここでのID属性は，(2)でsb=sElem.id+"Sub"としているので，spanのID属性に"Sub"をつけたものにしなくてはいけない．また,<div>タグで囲まれた部分が，サブカテゴリーとなります．ここではリンクのリストにしたが，<div>タグで囲めるものなら何でもよい．

【実行してみよう】

リンクという文字をクリックしてみよう．

リンク


1998(C),Motonari Morikawa