魔法のようなリスト要素で作られた無限に続くメニューを開閉できるようにする jQuery

物凄いたくさんのカテゴリがある時に開閉するようにした方が便利です。そのため開閉できるようにするシンプルなコードを作りました。

jQuery のコード

jQuery を読み込んでから、このコードを適用に読み込むと自動的に開閉機能が付きます。id などは適宜書き換えてください。

1
2
3
4
5
6

jQuery(function(j$) {
	j$('#menu ul > li ul').hide();
	j$('#menu ul > li a').click(function() {
		j$(this).siblings('ul').toggle();
	});
});

HTML のコード

以下の HTML に反応します。#menu 内のリストに反応するように作っていますが、時と場合によってここは書き換えると良いと思います。id がついてるので開くとその場所まで行く仕様ですが、嫌なら id を無くす手もあります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<div id="menu">
<ul>
	<li><a href="#title1" id="title1">title1</a>
		<ul>
			<li><a href="#subtitle1" id="subtitle1">subtitle1</a>
				<ul>
					<li>list1</li>
					<li>list2</li>
					<li>list3</li>
				</ul>
			</li>
			<li><a href="#subtitle2" id="subtitle2">subtitle2</a>
				<ul>
					<li>list4</li>
					<li>list5</li>
					<li>list6</li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#title2" id="title2">title2</a>
		<ul>
			<li><a href="#subtitle3" id="subtitle3">subtitle3</a>
				<ul>
					<li>list7</li>
					<li>list8</li>
					<li>list9</li>
				</ul>
			</li>
			<li><a href="#subtitle4" id="subtitle4">subtitle4</a>
				<ul>
					<li>list10</li>
					<li>list11</li>
					<li>list12</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
</div>

以下のページが大変参考になります。

関連記事

コメント

コメントは受け付けていません。