ツリービューインターフェイスを作成する

jQuery JavaScript

ツリービューインターフェイスを作成するにはjQueryのTreeviewプラブインを使用する
ディレクトリ構成については下記のとおりにする

<html>
<head>
<link rel="stylesheet" href="css/jquery.treeview.css" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.treeview.min.js"></script>
<script type="text/javascript">
//<![CDATA[
	$(document).ready(function() {
		$('#nav').treeview({
			collapsed: true,
			animated: 'fast',
			control: '#controller',
			persist: 'location'
		});
	});
//]]>
</script>
<style type="text/css">
</style>
</head>
<body>
<div id="controller"><a href="#">Collapse All</a> | <a href="#">Expand All</a></div>
<ul id="nav" class="treeview">
	<li>
		Menu 1
		<ul>
			<li>
				Sub Menu 1_1
				<ul>
					<li>
						Item 1_1_1
					</li>
					<li>
						Item 1_1_2
					</li>
				</ul>
			</li>
			<li>
				Sub Menu 1_2
				<ul>
					<li>
						Item 1_2_1
					</li>
					<li>
						Item 1_2_2
					</li>
					<li>
						Item 1_2_3
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>
		Menu 2
		<ul>
			<li>
				Sub Menu 2_1
			</li>
			<li>
				Sub Menu 2_2
				<ul>
					<li>
						Item 2_2_1
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
</body>
</html>