Toggle FontAwesome Careets on Click with jQuery

Question

FontAwesome 似乎沒有加載到這里的代碼片段中，所以請看這個 JSFiddle：

https://jsfiddle.net/e74coz3f/

我要做的是最初在 div 的右側顯示<i class="fas fa-caret-down"></i> ，然后切換到顯示<i class="fas fa-caret-up"></i>點擊product-suggestion-form-container div 后。 每次單擊 div 時，它們應該在上下之間來回切換。

我對在 jQuery 中的active和inactive類之間切換有什么誤解？

如果我將這樣的active和inactive類添加到 CSS：

https://jsfiddle.net/c12tvgdj/

什么都沒有顯示。

相關 HTML：

<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="product-suggestion-form-container">
  <span class="form-title">Product Suggestion Form</span>
  <span class="dropdown-arrow-top inactive-1"><i class="fas fa-caret-down"></i>
  <span class="dropdown-arrow-up-top active-2"><i class="fas fa-caret-up"></i>
  </span>
</div>

CSS

/*before toggle*/

.product-suggestion-form-container {
  border: 1px solid #c6c6c6;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  background-color: #f8f7f7;
  cursor: pointer;
}

.dropdown-arrow-top {
  display: block;
}

.dropdown-arrow-up-top {
  display: none;
}

/*after toggle*/

.dropdown-arrow-top.inactive-1 {
  /*display: none;*/
}

.dropdown-arrow-up-top.active-1 {
  /*display: block;*/
}

Javascript：

$(document).ready(function(){
   $(".product-suggestion-form-container").click(function(){
      $(".form-div-top").slideToggle();
      $(".dropdown-arrow-top").toggleClass("inactive-1");
      $(".dropdown-arrow-up-top").toggleClass("active-1");
   })
});

Answer 1

您的示例中幾乎沒有小錯字：

1. 在https://jsfiddle.net/e74coz3f/中使用active-2而不是active-1

2. 在https://jsfiddle.net/c12tvgdj/秒span沒有關閉也存在上述問題

此外，jQuery 安裝不正確，我得到Uncaught ReferenceError: $ is not defined in JSFiddle 控制台。

最后，我認為這可以通過一些更簡單的方式實現，例如https://jsfiddle.net/c7hwv0a6/1/或https://jsfiddle.net/a18ju6bv/ 。