如何在Bootstrap 4中切换可折叠的超赞字体图标？

时间：2018-09-24 05:27:41

标签： javascript jquery html bootstrap-4 font-awesome

以下代码在切换可折叠代码时可以正常工作。 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>

3 个答案:

答案 0 :(得分：1)

您需要的只是not selector，因此您当前的元素不会更新

$(".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>

答案 1 :(得分：0)

问题： 我单击+标志，它将扩展卡及其工作，但不会变为-标志

  

解决方案：

     
      
  • 您只能使用要为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>

答案 2 :(得分：0)

我尝试了不同的方法。取而代之的是通过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>

相关问题
最新问题