【JQuery】簡單的兩層選單

發表於 | | 閱讀次數:

先上效果圖

前言

一個簡單的兩層彈出選單，同樣的想法可以往下實作三層、四層

當呼叫Jquery的.on()來處理事件時，可以傳遞資料到處理事件的function中
Jquery的官網中也有範例可以參考JQuery官網
用這個方法判斷目前滑鼠移到哪個菜單，把選到的呼叫slideDown()，其他的收起來slideUp()，簡單實用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="mapMenu">
	<div class="classItem">
		<div class="mainItem">行車菜單</div>
			<div class="subItem">
			<ul>
				<li><label for="">機車選單</label></li>
				<li><label for="">汽車選單</label></li>
				<li><label for="">腳踏車選單</label></li>
				<li><label for="">高鐵選單</label></li>
				<li><label for="">台鐵選單</label></li>
			</ul>
		</div>
	</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(".subItem").slideUp(0);

for (var i = 0; i < $(".classItem").length; i++) {
	$(".classItem:eq(" + i + ")").on("mouseover", {
		id: i
	}, function(e) {
		n = e.data.id;
		 //mouseover事件發生時，放下該選單，並且把其餘選單收起來
		$(".subItem:eq(" + n + ")").slideDown(0);
		$(".subItem:not(:eq(" + n + "))").slideUp(0);
	});
	$(".classItem:eq(" + i + ")").on("mouseout", {}, function(e) {
		$(".subItem").slideUp(0);
	});
}
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
.classItem {
	float: left;
}
.mainItem {
	background-color: #ffffff;
	color: #000;
	font-size: 18px;
	cursor: pointer;
	text-align: center;
	height: 35px;
	line-height: 35px;
	width: 120px;
	border: 1px solid rgb(181, 181, 181);
}
.mainItem:hover {
	background-color: rgb(222, 222, 222);
}
.subItem ul {
	padding: 0px;
	width: 100%;
}
.subItem li {
	list-style-type: none;
	height: 32px;
}