如何在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>