Как получить значок для изменения, как только он будет нажат, а не ждать, пока остальная часть страницы будет отображаться

Question

Я создаю эффект аккордеона, используя Boostrap Collapse .

Я настроил кнопку для отображения значка вниз, чтобы развернуться, и значка вверх, чтобы свернуть, используя событие нажатия jquery.

HTML

<div id="accordion">
  <div class="card bg-primary myRounded">
    <div class="card-eader bg-white myRounded" id="headingTwo">
      <h5 class="mb-0">
        <button id="btnExpand" class="btn btn-link float-right collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseTwo">
          <i class="fas fa-chevron-circle-down fa-2x"></i>
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    
      </div>
    </div>
  </div>
</div>

И jquery.

$('#btnExpand').click(function() {
  $('.collapse')
    .on('shown.bs.collapse', function() {
      $(this)
        .parent()
        .find(".fa-chevron-circle-down")
        .removeClass("fa-chevron-circle-down")
        .addClass("fa-chevron-circle-up");
    })
    .on('hidden.bs.collapse', function() {
      $(this)
        .parent()
        .find(".fa-chevron-circle-up")
        .removeClass("fa-chevron-circle-up")
        .addClass("fa-chevron-circle-down");
    });
});

Пример можно найти здесь:

jsfiddle

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

Можно ли изменить это поведение, чтобы значок менялся при нажатии кнопки?

Спасибо

Answer 1

Если ваша единственная проблема - анимация, изменяющаяся сразу при щелчке, вы можете немного уменьшить свой код, просто переключая правильный класс при нажатии. Остальная часть кода кажется немного излишней.

Вместо этого, если вы замените весь код Jquery, которым вы поделились, со следующим, это должно сработать:

$('#btnExpand').click(function() {
    $('.fas').toggleClass("fa-chevron-circle-up");
});

Answer 2

Во-первых, обработчик кликов #btnExpand не нужен. Вы должны просто слушать события Bootstrap при загрузке страницы.

Сама проблема заключается в том, что вы используете события shown и hidden, которые запускаются только тогда, когда анимация заканчивается . Чтобы выполнить действие при запуске анимации, используйте show и hide. Для справки, вот Bootstrap документы , описывающие поведение этих событий.

Кроме того, вы также можете улучшить свою логику c, используя toggleClass() вместо отдельных addClass() / removeClass() звонки.

$('.collapse').on('show.bs.collapse', function() {
  $(this).parent().find(".fa-chevron-circle-down").toggleClass("fa-chevron-circle-down fa-chevron-circle-up");
}).on('hide.bs.collapse', function() {
  $(this).parent().find(".fa-chevron-circle-up").toggleClass("fa-chevron-circle-up fa-chevron-circle-down");
});

Обновленная скрипка

Answer 3

Возможно, есть лучшее решение, но я изменяю jQuery на следующее, и оно, похоже, делает то, что вы ищете

$('#btnExpand').click(function() {
      if($(this).find('i').hasClass('fa-chevron-circle-down')){
          $(this)
             .find('.fa-chevron-circle-down')
             .removeClass("fa-chevron-circle-down")
             .addClass("fa-chevron-circle-up");
      } else {
          $(this)
             .find('.fa-chevron-circle-up')
             .removeClass("fa-chevron-circle-up")
             .addClass("fa-chevron-circle-down");
      }
});