代码之家 › 专栏 › 技术社区 › HappyHands31

使用jQuery在单击时切换FontAwesome插入符号

css jquery html javascript

HappyHands31 · 技术社区 · 3 年前

FontAwesome似乎没有加载到这里的代码片段中,因此请查看以下JSFiddle:

<i class="fas fa-caret-down"></i> 在div的右侧,然后切换以显示 <i class="fas fa-caret-up"></i> product-suggestion-form-container 每次你点击div时,它们应该在上下之间来回切换。

我对在这两者之间切换有什么误解 active inactive jQuery中的类?

积极的 和像这样的类对CSS:

https://jsfiddle.net/c12tvgdj/

什么也看不到。

<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;*/
}

$(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");
   })
});