如何在Bootstrap 4中切換可折疊的超贊字體圖標？

Question

使以下代碼與切換可折疊一起工作正常。 問題是font awesome icon 。 如果單擊+號，它將擴展卡及其功能，但不會變為-號。

編輯

只有1個可折疊對象將打開，活動的可折疊對象必須具有-號，另一個是+號，依此類推。

我的語法正確嗎？

 $(".colHide").click(function (e) { $(this).toggleClass("fa fa-plus").toggleClass("fa fa-minus"); setTimeout(function () { $(".clsColHide").find("div.show").removeClass("show").fadeOut("slow", 100); $(".colHide ").removeClass().addClass("fa fa-plus float-right colHide"); if ($(this).hasClass("fa fa-plus")) $(e.target).removeClass().addClass("fa fa-minus float-right colHide"); }, 100); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <div class="col-md-12 clsColHide"> <div id="card_one" class="card"> <div class="card-header bg-success"> <h3 class="card-title"> text 1 <a class="fa fa-minus float-right colHide" id="min" data-toggle="collapse" data-target="#collapse1" href="#collapseOne"></a> <a class="custom-control custom-checkbox float-right"> <input type="checkbox" class="custom-control-input" id="complied0" name="complied0" value="true"> <label class="custom-control-label font-weight-normal" for="complied0"> Complied </label> &nbsp;&nbsp; </a> </h3> </div> <div id="collapse1" class="collapse show pt-3 pl-4 pr-4" data-parent="#accordion"> partial 1 </div> </div> </div> <div class="col-md-12 clsColHide"> <div id="card_one" class="card"> <div class="card-header bg-success"> <h3 class="card-title"> text 2 <a class="fa fa-plus float-right colHide" id="min" data-toggle="collapse" data-target="#collapse2" href="#collapseOne"></a> <a class="custom-control custom-checkbox float-right"> <input type="checkbox" class="custom-control-input" id="Complied0" name="Complied0" value="true"> <label class="custom-control-label font-weight-normal" for="Complied0"> Complied </label> &nbsp;&nbsp; </a> </h3> </div> <div id="collapse2" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion"> partial 2 </div> </div> </div> <div class="col-md-12 clsColHide"> <div id="card_one" class="card"> <div class="card-header bg-success"> <h3 class="card-title"> text 3 <a class="fa fa-plus float-right colHide" id="min" data-toggle="collapse" data-target="#collapse3" href="#collapseOne"></a> <a class="custom-control custom-checkbox float-right"> <input type="checkbox" class="custom-control-input" id="Complied0" name="Complied0" value="true"> <label class="custom-control-label font-weight-normal" for="Complied0"> Complied </label> &nbsp;&nbsp; </a> </h3> </div> <div id="collapse3" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion"> partial 3 </div> </div> </div> 

Answer 1

您所需要的不是選擇器，因此您的當前元素不會更新

 $(".colHide").click(function (e) { debugger; if($(this).hasClass("fa-minus")){ $(this).removeClass("fa fa-minus").addClass("fa fa-plus") }else{ $(this).removeClass("fa fa-plus").addClass("fa fa-minus"); } $(".colHide").not(this).removeClass("fa fa-minus").addClass("fa fa-plus") setTimeout(function () { $(".clsColHide").find("div.show").removeClass("show").fadeOut("slow", 100); }, 100); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <div class="col-md-12 clsColHide"> <div id="card_one" class="card"> <div class="card-header bg-success"> <h3 class="card-title"> text 1 <a class="fa fa-minus float-right colHide" id="min" data-toggle="collapse" data-target="#collapse1" href="#collapseOne"></a> <a class="custom-control custom-checkbox float-right"> <input type="checkbox" class="custom-control-input" id="complied0" name="complied0" value="true"> <label class="custom-control-label font-weight-normal" for="complied0"> Complied </label> &nbsp;&nbsp; </a> </h3> </div> <div id="collapse1" class="collapse show pt-3 pl-4 pr-4" data-parent="#accordion"> partial 1 </div> </div> </div> <div class="col-md-12 clsColHide"> <div id="card_one" class="card"> <div class="card-header bg-success"> <h3 class="card-title"> text 2 <a class="fa fa-plus float-right colHide" id="min" data-toggle="collapse" data-target="#collapse2" href="#collapseOne"></a> <a class="custom-control custom-checkbox float-right"> <input type="checkbox" class="custom-control-input" id="Complied0" name="Complied0" value="true"> <label class="custom-control-label font-weight-normal" for="Complied0"> Complied </label> &nbsp;&nbsp; </a> </h3> </div> <div id="collapse2" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion"> partial 2 </div> </div> </div> <div class="col-md-12 clsColHide"> <div id="card_one" class="card"> <div class="card-header bg-success"> <h3 class="card-title"> text 3 <a class="fa fa-plus float-right colHide" id="min" data-toggle="collapse" data-target="#collapse3" href="#collapseOne"></a> <a class="custom-control custom-checkbox float-right"> <input type="checkbox" class="custom-control-input" id="Complied0" name="Complied0" value="true"> <label class="custom-control-label font-weight-normal" for="Complied0"> Complied </label> &nbsp;&nbsp; </a> </h3> </div> <div id="collapse3" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion"> partial 3 </div> </div> </div> 

Answer 2

問題：我單擊+號，它將擴展卡及其工作，但它不會變為-號

解決方案：

• 您只能將要添加或刪除的類名用於addClass()或removeClass()
• 你們所有的代碼都是非常正確的，只是添加刪除+和-簽名代碼的條件。

檢查以下示例：

 $(".colHide").click(function (e) { setTimeout(function () { $(".clsColHide").find("div.show").removeClass("show").fadeOut("slow", 100); $(".colHide ").addClass("fa-plus").removeClass("fa-minus"); $(e.target).removeClass("fa-plus").addClass("fa-minus"); }, 100); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <div class="col-md-12 clsColHide"> <div id="card_one" class="card"> <div class="card-header bg-success"> <h3 class="card-title"> text 1 <a class="fa fa-minus float-right colHide" id="min" data-toggle="collapse" data-target="#collapse1" href="#collapseOne"></a> <a class="custom-control custom-checkbox float-right"> <input type="checkbox" class="custom-control-input" id="complied0" name="complied0" value="true"> <label class="custom-control-label font-weight-normal" for="complied0"> Complied </label> &nbsp;&nbsp; </a> </h3> </div> <div id="collapse1" class="collapse show pt-3 pl-4 pr-4" data-parent="#accordion"> partial 1 </div> </div> </div> <div class="col-md-12 clsColHide"> <div id="card_one" class="card"> <div class="card-header bg-success"> <h3 class="card-title"> text 2 <a class="fa fa-plus float-right colHide" id="min" data-toggle="collapse" data-target="#collapse2" href="#collapseOne"></a> <a class="custom-control custom-checkbox float-right"> <input type="checkbox" class="custom-control-input" id="Complied0" name="Complied0" value="true"> <label class="custom-control-label font-weight-normal" for="Complied0"> Complied </label> &nbsp;&nbsp; </a> </h3> </div> <div id="collapse2" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion"> partial 2 </div> </div> </div> <div class="col-md-12 clsColHide"> <div id="card_one" class="card"> <div class="card-header bg-success"> <h3 class="card-title"> text 3 <a class="fa fa-plus float-right colHide" id="min" data-toggle="collapse" data-target="#collapse3" href="#collapseOne"></a> <a class="custom-control custom-checkbox float-right"> <input type="checkbox" class="custom-control-input" id="Complied0" name="Complied0" value="true"> <label class="custom-control-label font-weight-normal" for="Complied0"> Complied </label> &nbsp;&nbsp; </a> </h3> </div> <div id="collapse3" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion"> partial 3 </div> </div> </div> 

Answer 3

我嘗試了不同的方法。 取而代之的是通過JS管理，我更改了每個標題內的標記。 看看下面是否適合您。

 $(".colHide").click(function (e) { $(this).toggleClass("expanded-header"); }); 

 .collapsed-header .fa-minus { display:none;} .collapsed-header .fa-plus { display:inline-block;} .expanded-header .fa-minus { display:inline-block;} .expanded-header .fa-plus { display:none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <div class="col-md-12 clsColHide"> <div id="card_one" class="card"> <div class="card-header bg-success"> <h3 class="card-title"> text 1 <a class="float-right colHide expanded-header" id="min" data-toggle="collapse" data-target="#collapse1" href="#collapseOne"> <i class="fa fa-minus">&nbsp;</i> <i class="fa fa-plus">&nbsp;</i> </a> <a class="custom-control custom-checkbox float-right"> <input type="checkbox" class="custom-control-input" id="complied0" name="complied0" value="true"> <label class="custom-control-label font-weight-normal" for="complied0"> Complied </label> &nbsp;&nbsp; </a> </h3> </div> <div id="collapse1" class="collapse show pt-3 pl-4 pr-4" data-parent="#accordion"> partial 1 </div> </div> </div> <div class="col-md-12 clsColHide"> <div id="card_one" class="card"> <div class="card-header bg-success"> <h3 class="card-title"> text 2 <a class="float-right colHide collapsed-header" id="min" data-toggle="collapse" data-target="#collapse2" href="#collapseOne"> <i class="fa fa-minus">&nbsp;</i> <i class="fa fa-plus">&nbsp;</i> </a> <a class="custom-control custom-checkbox float-right"> <input type="checkbox" class="custom-control-input" id="Complied0" name="Complied0" value="true"> <label class="custom-control-label font-weight-normal" for="Complied0"> Complied </label> &nbsp;&nbsp; </a> </h3> </div> <div id="collapse2" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion"> partial 2 </div> </div> </div> <div class="col-md-12 clsColHide"> <div id="card_one" class="card"> <div class="card-header bg-success"> <h3 class="card-title"> text 3 <a class="float-right colHide collapsed-header" id="min" data-toggle="collapse" data-target="#collapse3" href="#collapseOne"> <i class="fa fa-minus">&nbsp;</i> <i class="fa fa-plus">&nbsp;</i></a> <a class="custom-control custom-checkbox float-right"> <input type="checkbox" class="custom-control-input" id="Complied0" name="Complied0" value="true"> <label class="custom-control-label font-weight-normal" for="Complied0"> Complied </label> &nbsp;&nbsp; </a> </h3> </div> <div id="collapse3" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion"> partial 3 </div> </div> </div>