這一段筆記會用這個選單程式碼。
HTML
1
2
3
4
5
6
7
8
| <ul class="menu">
<li>選單1</li>
<li>選單2</li>
<li>選單3</li>
<li>選單4</li>
<li>選單5</li>
<li>選單6</li>
</ul>
|
SCSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| .menu {
width: 500px;
margin: 0 auto;
margin-top: 10px;
li {
border: 1px solid gray;
padding: 5px;
margin-bottom: 10px;
&:hover {
background-color: yellow;
cursor: pointer;
}
&.active {
background-color: yellow;
cursor: pointer;
}
}
}
|
this 選到自身元素
jQuery 中已經把 this 包裝好變成指向本身元素的寫法，變得相當方便，但在原生寫法就要看狀況而定了。
首先可以看到 SCSS 有加上一段是預備讓 JS 動態新增 .active 的片段程式碼。
要記錄的是如何透過 this 選取到自身元素，並且產生效果。可以這樣寫，
1
2
3
4
| $(".menu li").click(function (e) {
e.preventDefault();
$(this).addClass("active");
});
|
當我點擊到 .menu 的 li 時，在選到的自身元素動態加上 active，就會產生效果囉！
parent() 選到父元素
這個語法是 jQuery 包裝好的函式，也相當好用，當我點擊到元素本身後，會選到外層的父元素，並且控制它。
這邊的情境是，現在有一個選單，裡面有一個按鈕，當我點選按鈕後，會把該格的清單改變背景顏色，
HTML 架構
跟原本範本差不多，只是在 li 內加入了按鈕而已。
1
2
3
4
5
6
7
8
| <ul class="menu">
<li><button class="btn">選單1</button></li>
<li><button class="btn">選單2</button></li>
<li><button class="btn">選單3</button></li>
<li><button class="btn">選單4</button></li>
<li><button class="btn">選單5</button></li>
<li><button class="btn">選單6</button></li>
</ul>
|
jQuery 寫法
點擊按鈕後，自身元素的父元素會產生 toggleClass 效果，動態切換 .active 。
parent() 語法要寫在 $(this) 的後面。
1
2
3
4
| $(".btn").click(function (e) {
e.preventDefault();
$(this).parent().toggleClass("active");
});
|
siblings() 同層其他元素
這個語法就是選到同層元素，並指定該效果給它，這邊練習是滑鼠選到該元素後會改變背景顏色，而其他同層元素背景取消背景色。
一開始範例中的 li 就是同層元素。
jQuery 寫法
當我點擊 .menu 中的 li，會在自身元素增加 .active，並選到同層的 li 元素(siblings())同時取消賦予的 .active 效果。
1
2
3
4
| $(".menu li").click(function (e) {
e.preventDefault();
$(this).addClass("active").siblings().removeClass("active");
});
|
find() 找到子層元素
前面提到父層元素，那當然也有子層元素，這次要選到 li 後，會改變當中的文字顏色，
HTML 架構
可以看到 HTML 結構中，在 li 內有 h3 標題。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <ul class="menu">
<li>
<h3>選單1</h3>
</li>
<li>
<h3>選單2</h3>
</li>
<li>
<h3>選單3</h3>
</li>
<li>
<h3>選單4</h3>
</li>
<li>
<h3>選單5</h3>
</li>
<li>
<h3>選單6</h3>
</li>
</ul>
|
SCSS 樣式
在 h3 加上預備要的樣式，並新增一個 .active 預備動態新增效果時讓 h3 的文字改變顏色。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| .menu {
width: 500px;
margin: 0 auto;
margin-top: 10px;
li {
border: 1px solid gray;
padding: 5px;
margin-bottom: 10px;
&:hover {
background-color: #eeeeee;
cursor: pointer;
}
h3 {
display: inline-block;
&.active {
color: red;
cursor: pointer;
}
}
}
}
|
jQuery 寫法
當我點擊到 li 時，會選到 li 自身元素，再找到裡面的子層元素 h3，並且在 .active 做切換。
1
2
3
4
| $(".menu li").click(function (e) {
e.preventDefault();
$(this).find("h3").toggleClass("active");
});
|