菜蟲學習筆記：使用jQuery製作摺疊選單

發表於 | 更新於 | In | 0 comments |
文章字數 : 1.3k | 所需閱讀時間 ≈ 5 分鐘

這裡要記錄兩種摺疊式選單，都是使用html+css+jquery製作，但主要控制的部分還是在jQuery
一種是常見的Q&A選單，另一種是在製作左側選單列時會出現的垂直型選單。

單層式摺疊選單

在Q&A常常看到這種單層的折疊選單，點選其中一個question會展開answer，再點選其他的question時，會展開該 answer 且原本的會收回。

1.首先，先把html建立起來，這邊會使用一個question包一個Q&A

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="list">
  <div class="question">
    <h3>1.請問1+1=?</h3>
    <p>A:我猜應該是2</p>
  </div>
    <div class="question">
    <h3>2.請問為什麼進香團都要聚在一起呢？</h3>
    <p>A:與你焚香的快樂 勝過獨自擁有</p>
  </div>
    <div class="question">
    <h3>3.請問液晶的媽媽是誰？</h3>
    <p>A:液晶螢幕！</p>
  </div>
</div>

畫面呈現如下：

2.再來調整CSS，這裡會針對h3:hover和active做設定，目的是除了滑鼠移到問題時會有hover效果，以及當點選question展開時會出現效果。

1
2
3
4
5
6
7
8
9
10
.question h3 {
  border: 1px solid #000;
  font-size: 16px;
  padding: 5px;
  margin: 5px;
}

.question h3:hover , .question h3.active {
  background-color: #28a745;
  color: #FFFFFF;

除了h3之外，answer也要做一些調整，因為這裡的p是要點選後才出現，所以預設要將它先隱藏

1
2
3
4
.question p {
  display: none;
  padding: 5px;
}

3.接著就要開始在jquery做設定

  • 首先會做一個點擊事件，點擊該h3時會亮起來，其他沒被點擊的h3移除樣式
1
2
3
$('.question h3').click(function (e) { 
    $(this).toggleClass('active');  // 這裡的this代表的是點擊的h3
});
  • 目前click的是h3，從parent()找到父元素：question，再找到question的子元素p，用slideToggle()讓p能夠收合
1
$(this).parent().find('p').slideToggle();
  • 自己以外的p隱藏
    這邊click的一樣是h3，用parent()找到父元素：question，再使用siblings()找到同層其他的元素：question，並使用find()找到question的子元素p，做slideUp()將p隱藏
1
$(this).parent().siblings().find('p').slideUp();
  • 自己以外的h3移除active樣式
    最後再把未點選的h3移除active樣式
1
$(this).parent().siblings().find('h3').removeClass('active');

這樣就完成簡單的選單收合啦！

二階層層式摺疊選單

接著要記錄的是兩層式的摺疊選單，這裡的二階層式指得是會用兩層的ul li製作選單，點開候會有子選單出現。

1.首先，在html做初步的設定，要展現的是使用兩層的ul li的選單，所以第二層也會使用ul li包覆。

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
<ul class="cart">
  <li>
    <a href="#">選單A</a>
    <ul>
      <li><a href="#">選單A-1</a></li>
      <li><a href="#">選單A-2</a></li>
      <li><a href="#">選單A-3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">選單B</a>
    <ul>
      <li><a href="#">選單B-1</a></li>
      <li><a href="#">選單B-2</a></li>
      <li><a href="#">選單B-3</a></li>
    </ul>
  </li>
    <li>
    <a href="#">選單C</a>
    <ul>
      <li><a href="#">選單C-1</a></li>
      <li><a href="#">選單C-2</a></li>
      <li><a href="#">選單C-3</a></li>
    </ul>
  </li>
</ul>

2.接著，一樣到CSS做調整，這邊會使用子選擇器(Child combinator)讓只有被選擇到的元素有作用。

1
2
3
4
5
6
7
8
9
10
11
12
.cart > li > a {  /* 選擇設定主要選單a元素 */
  border: 1px solid #000;
  font-size: 16px;
  display: block;
  padding: 5px;
  margin: 5px;
}

.cart > li > a:hover {  /* 製作hover效果 */
  background-color: #007bff;
  color: #FFFFFF;
}

這邊和Q&A選單製作時相同，要先把子選單先隱藏，等到點選時才會出現。

1
2
3
.cart ul {  
  display: none;
}

3.再來是jquery，這邊相對就簡單一些。一樣是先製作一個點擊事件，但在這邊要注意的是，選取時會用子選擇器去選擇.cart > li > a，原因是，若是使用.cart a的話，點選選單時連第二層的子選單都會被點到。

1
2
3
$('.cart > li > a').click(function (e) { 
    e.preventDefault();  // 取消默認行為
});
  • 這裡的this代表是點選的a，parent()找到它的父元素：li，接著使用siblings()選擇自己以外的ul，找到自己以外的ul後(這邊的ul代表的是子選單的ul)做slideUp()收合效果
1
$(this).parent().siblings().find('ul').slideUp();
  • 這裡的this代表的是點選的a，parent()找到它的父元素：li，再來找到ul(這邊的ul指得是原本的ul，class="cart" 這個)，做slideToggle()將主要選單做toggle收合
1
$(this).parent().find('ul').slideToggle();

這邊記錄的是垂直選單，但我想常見的水平選單寫法應該…也是類似的吧？找個時間把它寫出來好了~