Блог

Главная - Вопросы по программированию - Загрузочная карта 4 складывающаяся карта со значком свернутого состояния

Загрузочная карта 4 складывающаяся карта со значком свернутого состояния

#html #css #twitter-bootstrap #bootstrap-4

Вопрос:

Мне удалось создать складную карту в начальной загрузке 4, но я хотел бы показать значок(стрелка, указывающая вверх, когда свернута, и стрелка, указывающая вниз, когда не свернута) в правом углу заголовка карты, чтобы указать свернутое состояние. Код складной карты приведен ниже

 <div class="card-header" data-toggle="collapse" data-target="#demo1">
    this is the card header
</div>
<div id="demo1" class="card-body collapse">
    this is the card body
</div>

Ответ №1:

для этого вам нужно использовать jquery:

HTML:

 <div class="card-header" data-toggle="collapse" data-target="#demo1">
    this is the card header
  <span class="icons float-right fa fa-arrow-alt-circle-up"></span>
</div>
<div id="demo1" class="card-body collapse">
    this is the card body
</div>

Jquery:

 $(document).ready(function(){
    $('.card-header').on("click", function(){
        var id = $(this).attr('data-target');
        if($(id).hasClass('show')){
            $(this).find('.icons').removeClass('fa-arrow-alt-circle-down').addClass('fa-arrow-alt-circle-up');
            console.log($(this).find('.icons').attr('class'));
        }else{
            $(this).find('.icons').removeClass('fa-arrow-alt-circle-up').addClass('fa-arrow-alt-circle-down');
            console.log($(this).find('.icons').attr('class'));
        }
    });
});

Комментарии:

1. спасибо вам за ответ. У меня на странице есть несколько складных карточек. Будет ли код jquery работать для всех из них, или мне нужно скопировать/вставить этот код для каждой карты и изменить в нем некоторые значения для этой конкретной карты? Кроме того, откуда берутся значки? Если мне нужно добавить некоторые ресурсы(файлы css/файлы js) на страницу, не могли бы вы упомянуть об этом?

2. это работает для всех карт, и значки -это просто класс, для которого нет CSS, просто скопируйте и вставьте и посмотрите сами. Я не знаю, какую библиотеку значков вы используете, я поставил Fontawesome по умолчанию.

Метки: