# 🏅 Day 24 - jQuery toggleClass

### 題目

請使用 jQuery 的 `toggleClass` 語法嘗試在點擊 `.list-item` 時加上 `.active`，再次點擊時會取消 `.active` 樣式 （需透過 Codepen 繳交）

請在 Pen Settings 設定 CSS Reset，如圖：


---

### HTML

<div class="list">
  <h1 class="list-title">甜點類別</h1>
  <ul>
    <li class="list-item active"><a class="list-link" href="#">所有甜點（48）</a></li>
  </ul>
</div>

### CSS

a {
  text-decoration: none;
}
.list {
  width: 300px;
  text-align: center;
}

.list-title {
  font-size: 24px;
  background: #3F5D45;
  color: #EAF0ED;
  padding: 16px 0;
}

.list-item {
  border: 1px solid #EAF0ED;

}

.list-item.active {
  background: #EAF0ED;
}

.list-link {
  font-size: 24px;
  line-height: 40px;
  font-weight: bold;
  color: #3F5D45;
  display: block;
  padding: 16px 0;
}

### JS

$('.list-item').click(function (e) {
 e.preventDefault();
 // 請使用 toggleClass 完成此作業
})

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://codepen.io/hexschool/pen/MWVeMbZ
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 1 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/RwzGgmm)|
| 2 | abab016001 |[Codepen](https://codepen.io/abab016001Jin/pen/XWLjaJZ)|
| 3 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/vYqXJKo) |
| 4 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/gONwxLp)|
| 5 | fendy1223 | [Codepen](https://codepen.io/fendy1223/pen/eYwdELL) |
| 6 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/abgmyQx) |
| 7 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/WNqGEyE?editors=1111) |
| 8 | yoishere | [Codepen](https://codepen.io/yoishere/pen/ZEdpXYV) |
| 9 | Theodore | [Codepen](https://codepen.io/GustavoFringgg/pen/BagLwNw) |
| 10 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/abgoOme) |
| 11 | KUN. | [Codepen](https://codepen.io/barry91205/pen/ExBgwmx) |
| 12 | Mike | [Codepen](https://codepen.io/mike2049/pen/wvLzrgm) |
| 13 | Jim | [Codepen](https://codepen.io/JimChou/pen/LYKRzOR) |
| 14 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/BagLwOP)|
| 15 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/vYqXJPG) |
| 16 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/LYKRzwL)|
| 17 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/jOjMaWN)|
| 18 |Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/QWXKOXE)|
| 19 | MY | [Codepen](https://codepen.io/ahmomoz/pen/GRbjyOp) |
| 20 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/ZEdprQw) |
| 21 | hao jing | [Codepen](https://codepen.io/hjxu/pen/ZEdpxXp) |
| 22 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/LYKRmGM) |
| 23 | Noelle | [Codepen](https://codepen.io/NoelleKH/pen/vYqXrVe) |
| 24 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/YzoGjQv?editors=1111) |
| 25 | kawa | [Codepen](https://codepen.io/z83xji6/pen/XWLjgxe) |
| 26 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/BagLezw) |
| 27 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/poXNzGB) |
| 28 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/xxoRbVz) |
| 29 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/VwJKWvQ) |
| 30 | 黛Dye | [Codepen](https://codepen.io/Dye_Note/pen/BagQWjy) |
| 31 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/poXNeWw) |
| 32 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/JjQbrMo) |
| 33 | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/qBzqpjJ) |
| 34 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/BagQxdo) |
| 35 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/rNEWdQj) |
| 36 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/ZEdBMzL) |
| 37 | wind | [Codepen](https://codepen.io/wind7y/pen/JjQbeyW) |
| 38 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/qBzqLZK)|
| 39 | 610 | [Codepen](https://codepen.io/YI-LING-LIU/pen/mdZOvaw) |
| 40 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/oNrYRpj) |
| 41 | n913239 | [Codepen](https://codepen.io/n913239/pen/JjQEPWg) |
| 42 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/VwJPZPL) |
| 43 | EdHuang | [Codepen](https://codepen.io/yide1986/pen/RwzKGpd) |
| 44 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/rNEjmob) |
| 45 | jasonlin | [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/QWXpLGg) |
| 46 | GAVI | [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/vYqgjyQ) |
| 47 | 俊 | [Codepen](https://codepen.io/jun12079/pen/YzoZpoq) |
| 48 | chris | [Codepen](https://codepen.io/chrischen666/pen/abgWZdg) |
| 49 | Chieh | [Codepen](https://codepen.io/Chieh_/pen/ZEdKpEE) |
| 50 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/xxodmmL) |
| 51 | Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/rNEmXBB) |
| 52 | glen_69515 | [Codepen](https://codepen.io/glenyaochih/pen/gONRbXj)|
| 53| xcx100 | [Codepen](https://codepen.io/c13026/pen/XWLgELL) |
| 54 | Toung | [Codepen](https://codepen.io/Toung/pen/NWZvWjj)
| 55 | Emma | [Codepen](https://codepen.io/Emma0919/pen/MWMEorO) |
| 56 | emmayo | [Codepen](https://codepen.io/emmayo/pen/dyBVdwe) |
| 57 | Asu | [Codepen](https://codepen.io/wuasu/pen/BagmqQx) |
| 58 | Enn | [Codepen](https://codepen.io/enntang/pen/WNqdNPx) |
| 59 | OSN |[Codepen](https://codepen.io/osncodepen/pen/abgjWqG)|

<!--
| No | Discord | [Codepen]() |
-->