FontAwesome似乎没有加载到这里的代码片段中,因此请查看以下JSFiddle:
https://jsfiddle.net/e74coz3f/
<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");
})
});