Переключить классы при срабатывании привязки

Использование Bootstrap 4.1 для создания складного элемента.

<div class = "card text-left mb-3 mt-3">
  <div class = "card-head p-3 d-flex justify-content-between">
    <h4>How do we get started?</h4>
    <a id = "ToggleElement" class = "" data-toggle = "collapse" href = "#collapse1" aria-expanded = "false" aria-controls = "collapse1"><i class = "fas fa-caret-down"></i></a>
  </div>
  <div class = "collapse" id = "collapse1">
  <div class = "card card-body">
    content...
  </div>
  </div>
</div>

Как изменить класс с каретки вниз при закрытии на каретку вверх при открытии.

Я знаю, что могу использовать что-то вроде

<script type = "text/javascript">
    function changeClass(){
        // Code to swap the classes
    }
    $('#ToggleElement').click(changeClass);
</script>

Что мне нужно, чтобы это работало?

javascript html twitter-bootstrap

30.05.2019 05:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Вы можете использовать toggleClass jQuery.

function changeClass(event) {
  $(event.target).find('i.fas').toggleClass('fa-caret-down');
  $(event.target).find('i.fas').toggleClass('fa-caret-up');
}

30.05.2019 05:55

Вы можете переключать курсор без обходного пути JavaScript.

отображать как вверх, так и вниз и скрывать каждый из них, когда оба родительских элемента имеют collapsed или нет.

:not(.collapsed) > i.fas.fa-caret-down {
  display: none;
}

.collapsed > i.fas.fa-caret-up {
  display: none;
}

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity = "sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin = "anonymous">


<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous"></script>

<div class = "accordion" id = "accordionExample">
  <div class = "card">
    <div class = "card-header" id = "headingOne">
      <h2 class = "mb-0">
        <button class = "btn btn-link" type = "button" data-toggle = "collapse" data-target = "#collapseOne" aria-expanded = "true" aria-controls = "collapseOne">
          Collapsible Group Item #1 <i class = "fas fa-caret-down"></i><i class = "fas fa-caret-up"></i>
        </button>
      </h2>
    </div>

    <div id = "collapseOne" class = "collapse show" aria-labelledby = "headingOne" data-parent = "#accordionExample">
      <div class = "card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class = "card">
    <div class = "card-header" id = "headingTwo">
      <h2 class = "mb-0">
        <button class = "btn btn-link collapsed" type = "button" data-toggle = "collapse" data-target = "#collapseTwo" aria-expanded = "false" aria-controls = "collapseTwo">
          Collapsible Group Item #2 <i class = "fas fa-caret-down"></i><i class = "fas fa-caret-up"></i>
        </button>
      </h2>
    </div>
    <div id = "collapseTwo" class = "collapse" aria-labelledby = "headingTwo" data-parent = "#accordionExample">
      <div class = "card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class = "card">
    <div class = "card-header" id = "headingThree">
      <h2 class = "mb-0">
        <button class = "btn btn-link collapsed" type = "button" data-toggle = "collapse" data-target = "#collapseThree" aria-expanded = "false" aria-controls = "collapseThree">
          Collapsible Group Item #3 <i class = "fas fa-caret-down"></i><i class = "fas fa-caret-up"></i>
        </button>
      </h2>
    </div>
    <div id = "collapseThree" class = "collapse" aria-labelledby = "headingThree" data-parent = "#accordionExample">
      <div class = "card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

30.05.2019 07:08

Ответ принят как подходящий

Первый

Измените свой начальный класс, чтобы значок работал правильно. (удалить букву "s" из faссtrike>)
fas fa-caret-down до fa fa-caret-down

<a id = "ToggleElement" class = "" data-toggle = "collapse" href = "#collapse1" aria-expanded = "false" aria-controls = "collapse1"><i class = "fa fa-caret-down"></i></a>

Второй

Добавьте логику js <script> для переключения класса при нажатии

$(document).ready(function() {
  $("#ToggleElement").on("click", function() {
    $("#ToggleElement>i.fa-caret-down").toggleClass('fa-caret-up');
  });
});

Это добавит прослушиватель «по клику» и переключит класс fa-caret-up всякий раз, когда был нажат элемент с я быToggleElement.

Рабочий пример здесь!

<!DOCTYPE html>
<html>

<head>
  <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonymous">
  <link href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet" integrity = "sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin = "anonymous">
</head>

<body>
  <div class = "container">
    <div class = "card text-left mb-3 mt-3">
      <div class = "dropdown card-head p-3 d-flex justify-content-between">
        <h4>How do we get started?</h4>
        <a id = "ToggleElement" data-toggle = "collapse" class = "" href = "#collapse1"><i class = "fa fa-caret-down"></i></a>
      </div>
      <div class = "collapse" id = "collapse1">
        <div class = "card card-body">
          Content1
        </div>
        <div class = "card card-body">
          Content2
        </div>
        <div class = "card card-body">
          Content3
        </div>
      </div>
    </div>
  </div>

  <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin = "anonymous"></script>
  <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin = "anonymous"></script>

  <script>
    $(document).ready(function() {

      $("#ToggleElement").on("click", function() {
        $("#ToggleElement>i.fa-caret-down").toggleClass('fa-caret-up');
      });
    });
  </script>

</body>

</html>

30.05.2019 07:26