Как переключить шрифт-потрясающий значок со складным в начальной загрузке 4? - PullRequest
Новая
       26

Как переключить шрифт-потрясающий значок со складным в начальной загрузке 4?

0 голосов
/ 24 сентября 2018

Иметь следующий код, работающий нормально с переключателем складной.Проблема с 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 голосов
/ 24 сентября 2018

Проблема: я нажимаю знак +, чтобы развернуть карту и ее работу, но она не меняется на - знак

Решение:

  • Вы можете использовать только имя класса, которое вы хотите добавить или удалить для 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>
0 голосов
/ 24 сентября 2018

Я пробовал другой способ.Вместо этого с помощью 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>
0 голосов
/ 24 сентября 2018

Все, что вам нужно, это , а не селектор , поэтому ваш текущий элемент не обновляется 

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