---
tags: 網頁切版直播班 - 2021 夏季班
---
# 7/23(五) 每日任務
## 題目

請大家試著理解[下拉選單](https://codepen.io/AliceChiang/pen/vYKdVMp)的操作，簡單用文字描述這是如何透過 CSS 與 jQuery 做出該效果

> 可以[點我](https://drive.google.com/file/d/1rDb598GbiGXic5kxCrql33e5WAGFdvvN/view?usp=sharing)下載整份檔案查看

## 回報流程

1. 請將解答寫在 Codepen 再將連結貼至「回報區」中回報


回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
答案：（請同學簡單描述）
-->

<!-- 1. 焦糖
答案：點擊加上 .active 把 max-height 修改為 200px。
-->
<!-- 2.孫 sunne
當滑鼠點擊選取器名稱 ham-icon 時， class 會增加標籤 active ，讓 ul 區高度變為 200px ; 再次點擊則移除 active -->

<!-- Jasmin
點擊 .ham-icon時 會加入在dropdown加入.active，使.dropdown高度修改為200px,再次點擊會刪除.active，toggleClass為切換意思
-->
<!-- 4.Alpha
當點擊.ham-icon會在.dropdown內增加.active來使ul高度變為200px 若再次點擊則會移除.active

-->
<!-- 5.LiShang
當點擊ham-icon時，會觸發個動作-幫dropdown的class新增active，使dropdown的height從0變成200px而出現下拉選單。再次點擊ham-icon會移除active，height會變回0
-->

<!-- 6. Lina Chen
當 .ham-icon 的 a 連結被點擊時，會將 .dropdown 的 ul 列表加上 "active" 樣式。
原先 .ham-icon 的 a 連結樣式高度為 0 不顯示，加上 active 樣式後給上高度 200px，因此可在畫面上顯示，再次點擊則可切換 active 樣式。
-->

<!-- 7.肉鬆
codepen: https://codepen.io/klrkicog/pen/LYyzwgp
-->
<!--8. Tina Yen
當點選到漢堡選單(ham-icon)時，ul.dropdown會從max-height: 0; 變成max-height:200px。使用到了jQuery, toggle的功能，.dropdown 產生了 .active的功能。
-->

<!-- 9. Sz
點擊.ham-icon時，觸發toggleClass事件，使.dropdown 增加一個 .active class
Max-height:200px
-->

<!-- 10. lumei
用jQuery，點擊到漢堡選單時(ham-icon)，.dropdown動態載入”active“的class，點擊時如果沒有”active“時增加，有的時候移除。"active"效果是max-height變成200px
-->

<!-- 11. Jean
點擊漢堡選單（.ham-icon）時，下拉選單（.dropdown）就會受到「.toggleClass」的影響而開啟，再點擊一次則會關閉。這是因為「.ham-icon」對「.dropdown」使用了「.active」，讓ul的高度變為200px，下拉選單開啟；當再點擊時，ul的高度又會從200px變回0，下拉選單關閉。

-->

<!-- 12.Vic
使用 jQuery 取得 .ham-icon 網頁元素後，停用預設動作，再抓取 .dropdown 這個元素並使用 toggleClass 這個函式就能將 .active 這個 class 加入或移除。

CSS 的部分則是將 .dropdown 做定位並預設高度為 0，在加入 .active 後，最大高度設定為 200 就會顯示，最後再設定圖層，讓它可以蓋過其他元素。
-->

<!-- 13. 雷古娜
https://codepen.io/tinahopo/pen/xxdPKKw -->

<!-- 14. Cheng Pei-hsuan
抓取class為.ham-icon的DOM元素綁定click事件，當該DOM元素被點擊時，依照其classList內是否已有.active加上此class；class為.ham-icon的DOM元素被加上.active的class後，此class內的設定將套用到.ham-icon的DOM元素上，導致元素的最高尺寸由0改為200，menu內容得以露出，但需要注意的是max-height的高度必須提前計算好，不然會露出不完整
-->

<!-- 15. Sam li
當.ham-icon 被點擊時 而 .dropdown 會受到 toggleClass的影響開啟 .active的 max-height:200px高度 但當再點擊一次就會關閉 下拉選單的ul高度又會變回 0
-->

<!-- 16.陳sam
首先jqery點擊後負責切換css.active語法，接著dropdown寫死高度且設為0，這樣內容就會在容器之外，
容器之外隱藏，且相對位置在在header下方，再點擊後增加高度，達成所作效果。因此效果重點在設計時
要計算好底下所有li高度
-->

<!-- 16.YuriT
點擊 漢堡選單 會切換(增加或取消) 類別名 dropdown 上 active 這個屬性, 並在css上設定 dropdown 若有 active 類別, 在html要呈現的樣子。
-->

<!-- 17. Cate Chang
下拉選單 .dropdown 原本 max-height 為 0px，當點擊 .ham-icon 時，透過 toggleClass 加上 class .active 切換至 200px 的展開狀態，再度點擊 .ham-icon 時則可移除 .active 達成關閉效果。
-->

<!-- 18. Gui
https://codepen.io/guitimliu/pen/MWmOgJN -->

<!-- 19. 大衛
透過點擊.ham-icon觸發了toggleClass效果，原本的.dropdown用overflow: hidden隱藏下拉選單，透過.active再把他叫出來
-->

<!-- 20. 蔡明達
尚未按下 ham-icon 前 -> over-flow: hidden & max-height: 0
按下 ham-icon 後 -> 使用 max-height: 200 將選單的高度撐開
-->

<!-- 21. Elaine Liu
先在 css 將選單隱藏，用 jQuery 點擊事件觸發收合按鈕，搭配 css 過場效果 -->

<!-- 22. Gill
先將初始的.dropdown寫死高度為0，而超出範圍的都hidden，使用jquery觸發點擊事件，點即.ham-icon，會自動偵測.dropdown是否有active的class，沒有加添加，有就刪除，有active後，CSS的.dropdown .active就會將高度變成200px，顯示下拉式選單-->

<!-- 23. Karen Huang
點擊 ham-icon 的時候，jQuery 函數會展開 dropdown 選單，toggleClass觸發css 的 .dropdown.active 把 ul 選單拉到最大高度200px。再點一次ham-icon，toggleClass 就會觸發 dropdown 的 overflow: hidden; 收回 ul 選單。
-->

<!-- 24. huanan
點擊漢堡按鈕後，會切換選單的active屬性(新增或刪除)來達成收合效果。
-->

<!-- 25. curry
下拉選單 .dropdown 原本 max-height 為 0px，
當點擊 .ham-icon 時，透過 toggleClass 加上 class .active
切換至 200px 的展開狀態，再度點擊 .ham-icon 時則可移除 .active 達成關閉效
-->

<!-- 26. Kk
點擊漢堡選單(.ham-click)的 <a> 連結之後，會觸發 jQuery 在 <ul class=".dropdown"> 再加上 ".active" 的 class, 就會讓選單的高度展開。因為原本 .dropdown 高度為 0 不會顯示，如果加上 .active 樣式後, max-width為 200px，因此可在畫面上顯示。並且搭配 toggleClass 的方法，可以達成開關收合效果。
-->

<!-- 27. 阿熊
點擊漢堡ham-icon，會觸發.dropdown的toggleClass('active')
加上active就會讓原本max-width: 0 變成 max-width: 200px達成展開的效果
-->

<!-- 28. 葉小嵐
點擊漢堡ham-icon，會會觸發$('.dropdown').toggleClass('active')透過新增.active 呼叫.active的css樣示高度而展開出下拉式選單。
-->

<!-- 29. SihLe Huang
透過 JQ 的 toggleClass() 動態的加入 ".active" 這個 class，在點擊 .ham-icon 的時候會觸發這個效果，將 ".dropdown" 原本的 max-height: 0; 修改為 max-height: 200px;，讓其有下拉的效果，透過再次點擊則可以消除 ".active" class 移除這個樣式效果。
-->

<!-- 30. Sylvia-H
將下拉選單（.dropdown）設為`max-height: 0px;overflow: hidden;`，點擊漢堡選單 icon （.ham-icon）時，用 JQ 的 toggleClass 方法打開 .active 屬性，並利用 transition 做出選單下拉的動畫效果。 -->

<!-- 31. hellocrab
1) position
let .header be relative, and let .dropdown be absolute to fix its position.

2) when user click .ham-icon
a) setup two style
i) .dropdown: max-heght 0 and transition animation.
ii) .dropdown.active: max-height 200px.
b) use jQuery to toggle .active on dropdown
-->

<!--32. 群嘉
1.position relative 與 absolute 固定好下拉清單,並把下拉式清單(dropdown)設定高度為0px，超出高度外內容隱藏。
2.jQuery 設定click "ham-icon"時 "dropdown"在togglClass作用下在dropdown增加active class，active 這設定高度使清單顯示。
-->

<!--33. anna
將.dropdown高度設為0先做隱藏，並寫一個.active高度200px，再用js寫點擊效果。當漢堡選單被點擊，會觸發.dropdown.active的高度，且透過toggleClass做出產開收合的動作
-->

<!-- 34. ZOE WU
將漢堡選單的展開樣式以CSS設定好，用.active賦予區塊高度以展開。jQuery使用.toggleClass切換.active即可展開或收合漢堡選單->

<!--35. yijun
答:利用jQuery在讓我們點'.ham-icon'後'.dropdown'會出現或刪除'active'這個class，然後在'.dropdown'時height為0，'.dropdown.active'時加上200px的高度。
-->

<!--36. RitaHuang
最主要的是對 .ham-icon選擇器的點擊觸發， dropdown 選擇器切換，dropdown 有 overflow: hidden 及 max-height: 0px 都是用來隱藏功用， transition: all 0.8s 是選單動畫效果及秒數，當c切換時，高度就會伸展，使表單出現。
---
tags: 網頁切版直播班 - 2021 夏季班
---
# 7/23(五) 每日任務
## 題目

請大家試著理解[下拉選單](https://codepen.io/AliceChiang/pen/vYKdVMp)的操作，簡單用文字描述這是如何透過 CSS 與 jQuery 做出該效果

> 可以[點我](https://drive.google.com/file/d/1rDb598GbiGXic5kxCrql33e5WAGFdvvN/view?usp=sharing)下載整份檔案查看

## 回報流程

1. 請將解答寫在 Codepen 再將連結貼至「回報區」中回報


回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
答案：（請同學簡單描述）
-->

<!-- 1. 焦糖
答案：點擊加上 .active 把 max-height 修改為 200px。
-->
<!-- 2.孫 sunne
當滑鼠點擊選取器名稱 ham-icon 時， class 會增加標籤 active ，讓 ul 區高度變為 200px ; 再次點擊則移除 active -->

<!-- Jasmin
點擊 .ham-icon時 會加入在dropdown加入.active，使.dropdown高度修改為200px,再次點擊會刪除.active，toggleClass為切換意思
-->
<!-- 4.Alpha
當點擊.ham-icon會在.dropdown內增加.active來使ul高度變為200px 若再次點擊則會移除.active

-->
<!-- 5.LiShang
當點擊ham-icon時，會觸發個動作-幫dropdown的class新增active，使dropdown的height從0變成200px而出現下拉選單。再次點擊ham-icon會移除active，height會變回0
-->

<!-- 6. Lina Chen
當 .ham-icon 的 a 連結被點擊時，會將 .dropdown 的 ul 列表加上 "active" 樣式。
原先 .ham-icon 的 a 連結樣式高度為 0 不顯示，加上 active 樣式後給上高度 200px，因此可在畫面上顯示，再次點擊則可切換 active 樣式。
-->

<!-- 7.肉鬆
codepen: https://codepen.io/klrkicog/pen/LYyzwgp
-->
<!--8. Tina Yen
當點選到漢堡選單(ham-icon)時，ul.dropdown會從max-height: 0; 變成max-height:200px。使用到了jQuery, toggle的功能，.dropdown 產生了 .active的功能。
-->

<!-- 9. Sz
點擊.ham-icon時，觸發toggleClass事件，使.dropdown 增加一個 .active class
Max-height:200px
-->

<!-- 10. lumei
用jQuery，點擊到漢堡選單時(ham-icon)，.dropdown動態載入”active“的class，點擊時如果沒有”active“時增加，有的時候移除。"active"效果是max-height變成200px
-->

<!-- 11. Jean
點擊漢堡選單（.ham-icon）時，下拉選單（.dropdown）就會受到「.toggleClass」的影響而開啟，再點擊一次則會關閉。這是因為「.ham-icon」對「.dropdown」使用了「.active」，讓ul的高度變為200px，下拉選單開啟；當再點擊時，ul的高度又會從200px變回0，下拉選單關閉。

-->

<!-- 12.Vic
使用 jQuery 取得 .ham-icon 網頁元素後，停用預設動作，再抓取 .dropdown 這個元素並使用 toggleClass 這個函式就能將 .active 這個 class 加入或移除。

CSS 的部分則是將 .dropdown 做定位並預設高度為 0，在加入 .active 後，最大高度設定為 200 就會顯示，最後再設定圖層，讓它可以蓋過其他元素。
-->

<!-- 13. 雷古娜
https://codepen.io/tinahopo/pen/xxdPKKw -->

<!-- 14. Cheng Pei-hsuan
抓取class為.ham-icon的DOM元素綁定click事件，當該DOM元素被點擊時，依照其classList內是否已有.active加上此class；class為.ham-icon的DOM元素被加上.active的class後，此class內的設定將套用到.ham-icon的DOM元素上，導致元素的最高尺寸由0改為200，menu內容得以露出，但需要注意的是max-height的高度必須提前計算好，不然會露出不完整
-->

<!-- 15. Sam li
當.ham-icon 被點擊時 而 .dropdown 會受到 toggleClass的影響開啟 .active的 max-height:200px高度 但當再點擊一次就會關閉 下拉選單的ul高度又會變回 0
-->

<!-- 16.陳sam
首先jqery點擊後負責切換css.active語法，接著dropdown寫死高度且設為0，這樣內容就會在容器之外，
容器之外隱藏，且相對位置在在header下方，再點擊後增加高度，達成所作效果。因此效果重點在設計時
要計算好底下所有li高度
-->

<!-- 16.YuriT
點擊 漢堡選單 會切換(增加或取消) 類別名 dropdown 上 active 這個屬性, 並在css上設定 dropdown 若有 active 類別, 在html要呈現的樣子。
-->

<!-- 17. Cate Chang
下拉選單 .dropdown 原本 max-height 為 0px，當點擊 .ham-icon 時，透過 toggleClass 加上 class .active 切換至 200px 的展開狀態，再度點擊 .ham-icon 時則可移除 .active 達成關閉效果。
-->

<!-- 18. Gui
https://codepen.io/guitimliu/pen/MWmOgJN -->

<!-- 19. 大衛
透過點擊.ham-icon觸發了toggleClass效果，原本的.dropdown用overflow: hidden隱藏下拉選單，透過.active再把他叫出來
-->

<!-- 20. 蔡明達
尚未按下 ham-icon 前 -> over-flow: hidden & max-height: 0
按下 ham-icon 後 -> 使用 max-height: 200 將選單的高度撐開
-->

<!-- 21. Elaine Liu
先在 css 將選單隱藏，用 jQuery 點擊事件觸發收合按鈕，搭配 css 過場效果 -->

<!-- 22. Gill
先將初始的.dropdown寫死高度為0，而超出範圍的都hidden，使用jquery觸發點擊事件，點即.ham-icon，會自動偵測.dropdown是否有active的class，沒有加添加，有就刪除，有active後，CSS的.dropdown .active就會將高度變成200px，顯示下拉式選單-->

<!-- 23. Karen Huang
點擊 ham-icon 的時候，jQuery 函數會展開 dropdown 選單，toggleClass觸發css 的 .dropdown.active 把 ul 選單拉到最大高度200px。再點一次ham-icon，toggleClass 就會觸發 dropdown 的 overflow: hidden; 收回 ul 選單。
-->

<!-- 24. huanan
點擊漢堡按鈕後，會切換選單的active屬性(新增或刪除)來達成收合效果。
-->

<!-- 25. curry
下拉選單 .dropdown 原本 max-height 為 0px，
當點擊 .ham-icon 時，透過 toggleClass 加上 class .active
切換至 200px 的展開狀態，再度點擊 .ham-icon 時則可移除 .active 達成關閉效
-->

<!-- 26. Kk
點擊漢堡選單(.ham-click)的 <a> 連結之後，會觸發 jQuery 在 <ul class=".dropdown"> 再加上 ".active" 的 class, 就會讓選單的高度展開。因為原本 .dropdown 高度為 0 不會顯示，如果加上 .active 樣式後, max-width為 200px，因此可在畫面上顯示。並且搭配 toggleClass 的方法，可以達成開關收合效果。
-->

<!-- 27. 阿熊
點擊漢堡ham-icon，會觸發.dropdown的toggleClass('active')
加上active就會讓原本max-width: 0 變成 max-width: 200px達成展開的效果
-->

<!-- 28. 葉小嵐
點擊漢堡ham-icon，會會觸發$('.dropdown').toggleClass('active')透過新增.active 呼叫.active的css樣示高度而展開出下拉式選單。
-->

<!-- 29. SihLe Huang
透過 JQ 的 toggleClass() 動態的加入 ".active" 這個 class，在點擊 .ham-icon 的時候會觸發這個效果，將 ".dropdown" 原本的 max-height: 0; 修改為 max-height: 200px;，讓其有下拉的效果，透過再次點擊則可以消除 ".active" class 移除這個樣式效果。
-->

<!-- 30. Sylvia-H
將下拉選單（.dropdown）設為`max-height: 0px;overflow: hidden;`，點擊漢堡選單 icon （.ham-icon）時，用 JQ 的 toggleClass 方法打開 .active 屬性，並利用 transition 做出選單下拉的動畫效果。 -->

<!-- 31. hellocrab
1) position
let .header be relative, and let .dropdown be absolute to fix its position.

2) when user click .ham-icon
a) setup two style
i) .dropdown: max-heght 0 and transition animation.
ii) .dropdown.active: max-height 200px.
b) use jQuery to toggle .active on dropdown
-->

<!--32. 群嘉
1.position relative 與 absolute 固定好下拉清單,並把下拉式清單(dropdown)設定高度為0px，超出高度外內容隱藏。
2.jQuery 設定click "ham-icon"時 "dropdown"在togglClass作用下在dropdown增加active class，active 這設定高度使清單顯示。
-->

<!--33. anna
將.dropdown高度設為0先做隱藏，並寫一個.active高度200px，再用js寫點擊效果。當漢堡選單被點擊，會觸發.dropdown.active的高度，且透過toggleClass做出產開收合的動作
-->

<!-- 34. ZOE WU
將漢堡選單的展開樣式以CSS設定好，用.active賦予區塊高度以展開。jQuery使用.toggleClass切換.active即可展開或收合漢堡選單->

<!--35. yijun
答:利用jQuery在讓我們點'.ham-icon'後'.dropdown'會出現或刪除'active'這個class，然後在'.dropdown'時height為0，'.dropdown.active'時加上200px的高度。
-->

<!--36. RitaHuang
最主要的是對 .ham-icon選擇器的點擊觸發， dropdown 選擇器切換，dropdown 有 overflow: hidden 及 max-height: 0px 都是用來隱藏功用， transition: all 0.8s 是選單動畫效果及秒數，當切換成.dropdown .active時，高度就會伸展，使表單出現。
https://codepen.io/Rita-Rossweisse/pen/XWRzqbY
-->

<!-- 37. Ruby Chiang
當點擊漢堡選單(.ham-icon)時，會透過toggleClass針對.dropdown下拉選單去動態增加或移除.active這個class (原先已有.active則動態移除，反之則動態增加) -->

<!-- 37. Jamie
overflow:自動將選單隱藏
max-height:設定高度
transition:轉場速度
利用點擊事件在.dropdown中加入/隱藏.active
-->

<!-- 38. Erin Huang
CSS
.dropdown用絕對位置定位後，在高度刻意設為0，所以平常不會看到該樣式；其中因為選單必須顯示在畫面最上層，有下z-index

jQuery
點選漢堡按鈕 .ham-icon後，以toggleClass的特性來展現/折疊選單.dropdown，所使用的.active是設定高度，來顯示選單
-->

<!-- 38. jimmyFang
先將dropdownu的CSS樣式寫好，並透過點擊.ham-icon後，觸發.dropdown下拉式選單事件，加入/隱藏.active
-->

<!-- 39. Shani
取得DOM元素.ham-icon透過click點擊事件使.dropdown觸發toggleClass 加入.active
Css中 .active設定max-height200 使網頁畫面從原本.dropdown設定高度0 變為200後可以看到ul下拉內容
-->

<!-- 40. Meng
一開始將.dropdown的max-height設為0px，並使用overflow:hidden，讓下拉式選單不要顯示;當點擊.ham-icon，使用jQuery的.toggleClass為.dropdown增加.active，這樣才能使用.dropdown.active(這個class的意思是必須同時具有.dropdown和.active的class)，讓將dropdown的max-height從0px更改成200px
-->

<!-- 41. Joy Cheng
codepen 附註說明 https://codepen.io/joycheng5432/pen/VwbyWNq
-->

<!-- 42. axlrock1021
codepen: https://codepen.io/andy1021/pen/JjNMrjP
答案：點擊加上 .active 把 max-height 修改為 200px。
-->

<!-- 43. Yurie
codepen: https://codepen.io/_u_jung/pen/BaRJwmr
-->

<!-- 44.Hi Annie
原本的dropdown的max-height是0，設定active的max-height是200，並用jQuery點擊漢堡選單會切換 dropdown的狀態高度從0到200，再點擊從200變0，依此循環-->

<!-- 45.WilsonHan
dropdown的min-height預設為0，點擊ham-icon之後,透過Jquery把.active附加到dropdown，把max-height更改為200px
-->

<!-- 45.Mikan
codepen 附註說明 https://codepen.io/elaine706/pen/XWRZmaj
-->

<!--46.LTL
使用 jQuery 的 toggleClass 語法，當點擊.ham-icon會在.dropdown 中增加.active，使ul高度變為200px 若再次點擊則會移除.active
-->

<!--47.RIley
透過點擊.ham-icon的事件，觸發toggleClass在.dropdown加上或移除.active的class名稱。並在css中寫下.active的程式碼max-height:200px，來達到下拉式選單的效果。
-->

<!-- 48.Calon
.dropdown 的高度為 0px，.dropdown.active 的高度是 200px，利用 jQuery 的 classToggle 為 .dropdown 加上或去掉 .active，改變 .dropdown 高度來做下拉式選單的效果
-->

<!-- 49.Benson
class dropdown初始高度為0px且overflow是hidden隱藏li,透過已綁定click事件的class ham-icon element,當點擊該element觸發綁定在class dropdown elenemt的toggleClass,當沒有class active的時候為該element添加上使其改變ul的高度來顯示出被隱藏的li，有則移除class active
-->

<!-- 50.Jim Hwang
一開始透過max-height:0px限制選單高度，overflow hidden來隱藏超過高度的選單，透過漢堡選單的JQuery點擊事件觸發.dropDown加入css active的高度200px來顯示選單不給overflow隱藏li。
-->

<!-- 51. Gillian
dropdown 先透過 max-height:0px 加上overflow:hidden藏起來; 按下漢堡icon後,因為dropdown 有toggleclass (on/off class) 加上active的class,讓dorpdown顯示或收回;
顯示的方式透過(1) max-height:200px給予高度(2)動畫效果transition: all 0.8s;
-->

<!-- 52. Tori
1. 未點擊漢堡選單 ( .ham-icon ) 時，dropdown 列表的高度為 0 ，overflow:hidden 將超過範圍的內容作隱藏
2. 第一次點擊漢堡選單時後觸發 $('.dropdown').toggleClass('active') 的程式，為 dropdown 列表加上 active Class ( 高度 200px )，列表出現
3. 再次點擊漢堡選單時，會移除 active Class，列表消失
4. .toggleClass() 的作用為，當目標有指定的 Class 時就移除 Class，沒有的話就加上 Class
-->

<!-- 53. 三隻小貓
先將原本的選單清單(.dropdown)隱藏(高度0)，在漢堡(.ham-icon)加上jQuery點擊事件，點擊後在class dropdown加上class acitve使其出現(高度200px)
※不知道這部分的 e.preventDefault(); 是要阻止什麼預設事件
試著取消這句好像不太有影響?
-->

<!-- 54. Jessie Cheng
點擊 .ham-icon 後，觸發設定好的 click event listener：在 .dropdown 上加上 class .active
原本未加 .active 時，.dropdown 是透過 max-height: 0px;＋overflow: hidden;，將原有的 HTML 給隱藏起來。加上 .active 之後，因為 max-height: 200px; 的關係，.dropdown 就顯示出來了（且會搭配原有的 transition: all 0.8s; 做動畫效果）
-->

<!-- 55. WA
https://codepen.io/ldddl/pen/OJmobMr
用JQuery指定class名稱ham-icon，click點擊事件觸發時:
1.e.preventDefault 阻止事件冒泡
2.用JQuery指定class名稱dropdown，使用toggleClass函式來呈現開關特效在class名稱active上
class名稱dropdown，預設為隱藏(overflow: hidden)，利用toggleClass函式特性在隱藏和顯示上切換
-->

<!-- 56.Page
1.css預設將".dropdown"的最大高度設定為0，加上over-flow設為hidden，所以可以製造出".doropdown"不存在的效果
2.使用jquery，在".ham-icon"設定滑鼠事件，點擊後觸發 ".dropdown"的".toggleClass()"事件，將".dropdown"添加上名為"active"的class
3.".active"設定最大高度改為200px，會使原本在外溢出去的並被隱藏的內容重新獲得空間得以顯示，再加上原本的".dropdown"設定了transition，所以當高度從0px往200px變動時，會自動在這兩個值之間添加補間動畫，達成下拉選單的效果
-->

<!-- 57.陳品宏
點擊ham-icon替dropdown新增active，使高度變為200px，使menu空間延展，再次點擊高度會改為0
-->

<!--58.黃羽均
點ham-icon讓dropdown多加了.active這個類別，讓高度變成200px，再點一次就會取消active這個類別，高度變成零。
-->

<!--59.Keep 1.初始的.dropdown必須寫死高度為0，只要超出範圍的就hidden
2.利用jquery觸發click事件，點擊.ham-icon，
3.toggleClass會偵測到.dropdown是否有active的class，有的話則刪除 沒有則添加，
4.有active後，CSS的.dropdown .active就會將高度變成200px，顯示下拉式選單
https://codepen.io/keep-/pen/jOwZrBB
- -->