Как разделить между двумя иконками в JQuery свернуть

Question

У меня есть вложенный загрузочный коллапс, и он работает, но когда я нажимаю на второй коллапс, значок первого свертка тоже работает одновременно, поэтому я думаю, что метод jQuery имеет тот же идентификатор или тот же класс, что и я.знаете, как изменить его, чтобы разделить две иконки коллапса.

Вот мой код:

//colapse avec circle

$(".collapse").on('show.bs.collapse', function() {
  $("." + this.id + "_aarrow").text('remove_circle_outline');
});

$(".collapse").on('hide.bs.collapse', function() {
  $("." + this.id + "_aarrow").text('add_circle_outline');
});

//colapse avec expand

$(".collapse").on('show.bs.collapse', function() {
  $("." + this.id + "_arrow").text('expand_less');
});

$(".collapse").on('hide.bs.collapse', function() {
  $("." + this.id + "_arrow").text('expand_more');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" id="Professions" style="border-top: 0px; border-bottom: 0px;">
  <div class="col-12">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <a class="mdc-list-item" style="width:100%;margin-right:3px;margin-left:3px">
            <div class="col-sm">
              <div class="row" data-toggle="collapse" data-target="#Professionsliberales" style="cursor:pointer">
                <span class="user" style="font-weight:bold">Professions libérales</span>
              </div>
            </div>
            <div class="col-sm">
              <div class="col-md-1 chevron-down" data-toggle="collapse" data-target="#Professionsliberales" style="float:right;margin-right:0px">
                <i class="Professionsliberales_arrow material-icons float-right material-expand ripple" style="color: #0047FD !important;">
                        expand_more
                        </i>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div id="Professionsliberales" class="collapse">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div data-toggle="collapse" data-target="#architect" aria-expanded="false" aria-controls="collapseExample">
              <a class="mdc-list-item" data-toggle="tooltip" data-placement="top" style="display: block;height:100%;cursor:pointer;">
                <i class="architect_aarrow material-icons" style="margin-right:10px">
                     add_circle_outline
                     </i>Architectes, Ingénieurs et Techniciens
              </a>
            </div>
            <div class="collapse" id="architect" style="margin-left:20px">
              <a class="mdc-list-item" tauxPlafonds="CPAIT" data-toggle="tooltip" data-placement="top" style="cursor:pointer">
                     Complémentaire forfait
                     </a>
              <a class="mdc-list-item" tauxPlafonds="PLACPAIT" data-toggle="tooltip" data-placement="top" style="cursor:pointer">
                     Plafonds complémentaire
                     </a>
              <a class="mdc-list-item" tauxPlafonds="IDAIT" data-toggle="tooltip" data-placement="top" style="cursor:pointer">
                     Invalidité décès
                     </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Так что моя проблема в том, что когда я нажимаю второй коллапс со значком круга, я вижу, что значок расширения работает одновременно, и это нежелательно.

Answer 1

Поскольку все элементы являются collapse элементами и они являются вложенными, они оба отвечают на событие, потому что событие пузырится.При пузырьковом событии после того, как элемент, получающий событие, обрабатывает его, он передает событие родительскому элементу и т. Д., Пока не будет остановлен или не достигнет верхнего элемента.Поскольку родитель также реагирует на события show.bs.collapse, он также переключается.

Пузыри событий - это то, как работает делегирование, вы устанавливаете обработчик для родительского элемента от имени некоторых дочерних элементов, сокращая количество событий, которые вы должны прикрепить к документу, и позволяясобытие для работы с «живыми» элементами без необходимости прикреплять обработчик к каждому новому элементу.

Вы можете исправить это, остановив событие во внутреннем элементе.

//colapse avec circle

$(".collapse").on('show.bs.collapse', function() {
  $("." + this.id + "_aarrow").text('remove_circle_outline');
});

$(".collapse").on('hide.bs.collapse', function() {
  $("." + this.id + "_aarrow").text('add_circle_outline');
});

//colapse avec expand

$(".collapse").on('show.bs.collapse', function(evt) {
  $("." + this.id + "_arrow").text('expand_less');
  evt.stopPropagation();
});

$(".collapse").on('hide.bs.collapse', function(evt) {
  $("." + this.id + "_arrow").text('expand_more');
  evt.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" id="Professions" style="border-top: 0px; border-bottom: 0px;">
  <div class="col-12">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <a class="mdc-list-item" style="width:100%;margin-right:3px;margin-left:3px">
            <div class="col-sm">
              <div class="row" data-toggle="collapse" data-target="#Professionsliberales" style="cursor:pointer">
                <span class="user" style="font-weight:bold">Professions libérales</span>
              </div>
            </div>
            <div class="col-sm">
              <div class="col-md-1 chevron-down" data-toggle="collapse" data-target="#Professionsliberales" style="float:right;margin-right:0px">
                <i class="Professionsliberales_arrow material-icons float-right material-expand ripple" style="color: #0047FD !important;">
                        expand_more
                        </i>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div id="Professionsliberales" class="collapse">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div data-toggle="collapse" data-target="#architect" aria-expanded="false" aria-controls="collapseExample">
              <a class="mdc-list-item" data-toggle="tooltip" data-placement="top" style="display: block;height:100%;cursor:pointer;">
                <i class="architect_aarrow material-icons" style="margin-right:10px">
                     add_circle_outline
                     </i>Architectes, Ingénieurs et Techniciens
              </a>
            </div>
            <div class="collapse" id="architect" style="margin-left:20px">
              <a class="mdc-list-item" tauxPlafonds="CPAIT" data-toggle="tooltip" data-placement="top" style="cursor:pointer">
                     Complémentaire forfait
                     </a>
              <a class="mdc-list-item" tauxPlafonds="PLACPAIT" data-toggle="tooltip" data-placement="top" style="cursor:pointer">
                     Plafonds complémentaire
                     </a>
              <a class="mdc-list-item" tauxPlafonds="IDAIT" data-toggle="tooltip" data-placement="top" style="cursor:pointer">
                     Invalidité décès
                     </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Если вам требуется всплытие событий для других функций на вашей странице, вы можете использовать эту другую версию, не останавливая событие:

//colapse avec circle

$(".collapse").on('show.bs.collapse', function() {
  $("." + this.id + "_aarrow").text('remove_circle_outline');
});

$(".collapse").on('hide.bs.collapse', function() {
  $("." + this.id + "_aarrow").text('add_circle_outline');
});

//colapse avec expand

$(".collapse").on('show.bs.collapse', function(evt) {
  if (evt.target === evt.currentTarget) {
    $("." + this.id + "_arrow").text('expand_less');
  }
});

$(".collapse").on('hide.bs.collapse', function(evt) {
  if (evt.target === evt.currentTarget) {
    $("." + this.id + "_arrow").text('expand_more');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" id="Professions" style="border-top: 0px; border-bottom: 0px;">
  <div class="col-12">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <a class="mdc-list-item" style="width:100%;margin-right:3px;margin-left:3px">
            <div class="col-sm">
              <div class="row" data-toggle="collapse" data-target="#Professionsliberales" style="cursor:pointer">
                <span class="user" style="font-weight:bold">Professions libérales</span>
              </div>
            </div>
            <div class="col-sm">
              <div class="col-md-1 chevron-down" data-toggle="collapse" data-target="#Professionsliberales" style="float:right;margin-right:0px">
                <i class="Professionsliberales_arrow material-icons float-right material-expand ripple" style="color: #0047FD !important;">
                            expand_more
                            </i>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div id="Professionsliberales" class="collapse">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div data-toggle="collapse" data-target="#architect" aria-expanded="false" aria-controls="collapseExample">
              <a class="mdc-list-item" data-toggle="tooltip" data-placement="top" style="display: block;height:100%;cursor:pointer;">
                <i class="architect_aarrow material-icons" style="margin-right:10px">
                         add_circle_outline
                         </i>Architectes, Ingénieurs et Techniciens
              </a>
            </div>
            <div class="collapse" id="architect" style="margin-left:20px">
              <a class="mdc-list-item" tauxPlafonds="CPAIT" data-toggle="tooltip" data-placement="top" style="cursor:pointer">
                         Complémentaire forfait
                         </a>
              <a class="mdc-list-item" tauxPlafonds="PLACPAIT" data-toggle="tooltip" data-placement="top" style="cursor:pointer">
                         Plafonds complémentaire
                         </a>
              <a class="mdc-list-item" tauxPlafonds="IDAIT" data-toggle="tooltip" data-placement="top" style="cursor:pointer">
                         Invalidité décès
                         </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>