jQuery 筆記 - dropdown 選單中的箭頭同步旋轉

這次專案要做一個 dropdown 的下拉式選單，並且要擁有下方條件：

在選單右側要有一個箭頭圖示，在點擊箭頭圖示時會同步旋轉。
收合時箭頭要朝下，展開時箭頭要朝上。

HTML

HTML 的架構會如下方，

<div class="dropdown">
  <div class="form">
    <input type="text" id="select" value="--- select ---" />
    <button class="button"><i class="fas fa-chevron-down fa-sm"></i></button>
  </div>
  <ul class="dropdownList">
    <li><a href="#">option one</a></li>
    <li><a href="#">option two</a></li>
  </ul>
</div>

按鈕的部分，我盡量使用 Button 的語法，讓按鈕單純點，不會受到其他標籤所附加的屬性影響。
我把選單跟下拉內容分開寫，因下拉內容要預設為隱藏 (display: none;)

CSS

CSS 比較要注意的是以下部分，

.button {
  width: 50px;
  .fa-chevron-down {
    transform: rotate(0deg);
    transition: all 0.6s;

    &.active {
      transform: rotate(180deg);
    }
  }
}

因為旋轉的是箭頭，不是按鈕，所以效果要寫在箭頭中，這邊使用到 transform:rotate(); 的函式，原本使用的教是朝下的箭頭，所以預設參數為 0 度，transform:rotate(0deg);，展開選單要翻轉 180 度變成向上，所以參數會是 180 度，transform:rotate(180deg);。

deg = degree (度)

其他樣式內容可以自己設定。

JavaScript

互動效果使用 jQuery 來綁定與使用，透過 CSS 跟 jQuery 的各司其職，在網頁上的互動變得相當強大，大家只要專心做自己的事情就可以了。

$(function () {
  $(".button").click(function (e) {
    e.preventDefault();
    $(".dropdownList").slideToggle(500);
    $(".fa-chevron-up").toggleClass("active");
  });
});

綁定按鈕，並給予點擊事件，首先取消預設效果，因為 .dropdownList 有 a 連結，怕誤觸了 href 屬性，所以使用 preventDefault();，但其實好像不用。
再來綁定 .dropdownList 使其點擊有下拉/收合效果 0.5 秒。
最後綁定箭頭 icon，使其增加 .active 的 className，因為已經是使用 toogleClass，所以參數只要寫 active ，不是寫 .active。