Изменить значок Font Awesome на следующем теге i - PullRequest
Новая
       12

Изменить значок Font Awesome на следующем теге i

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

У меня есть аккордеон, который в свою очередь имеет пару внутренних аккордеонов. Базовая структура похожа на 

<div class="accordion" id="accordion1">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo" id="accordianHeader">
                Main Title <i class="fa fa-chevron-right" aria-hidden="true"></i>
            </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
                <div class="accordion" id="accordion2">
                    <div class="accordion-group mtb-10">
                        <div class="accordion-heading">
                            <a class="accordion-toggle font-weight-bold" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
                                Inner Title One <i class="fa fa-chevron-right" aria-hidden="true"></i>
                            </a>
                        </div>
                        <div id="collapseInnerOne" class="accordion-body collapse in">
                            <div class="accordion-inner">

                            </div>
                        </div>
                    </div>
                    <div class="accordion-group mtb-10">
                        <div class="accordion-heading">
                            <a class="accordion-toggle font-weight-bold" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo">
                                Inner Title Two <i class="fa fa-chevron-right" aria-hidden="true"></i>
                            </a>
                        </div>
                        <div id="collapseInnerTwo" class="accordion-body collapse">
                            <div class="accordion-inner">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Как видите, у каждого accordion-heading есть шрифт потрясающий fa-chevron-right. Когда это будет расширено, я хочу изменить его на fa-chevron-down

Сначала я попробовал 

$('.accordion').on('show.bs.collapse hide.bs.collapse', function (e) {
    $(this).find('i').toggleClass('fa-chevron-right fa-chevron-down');
});

Но это, кажется, меняет их всех одновременно, а не только свернутый раздел.

Я также пробовал с ближайшим и следующим, но это, похоже, ничего не делает.

Как получить правильное изображение?

Спасибо

Ответы [ 2 ]

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

Не нужно ни <i></i> элементов, ни неприятных jQuery, вы можете сделать это в чистом CSS: 

.accordion-toggle:not([aria-expanded]):after,
.accordion-toggle[aria-expanded="false"]:after {
  font-family: FontAwesome;
  content: '\f054';
}
.accordion-toggle[aria-expanded="true"]:after {
  font-family: FontAwesome;
  content: '\f053';
}

демо с разметкой выше, кроме тегов <i> -> http://jsfiddle.net/1drLbqpz/

Список кодов FontAwesome -> https://fontawesome.com/cheatsheet

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

Если вы не возражаете добавить событие click вместо события show / hide, попробуйте сделать так: 

$('#accordianHeader').click(function(){
    $(this).find('i').toggleClass('fa-chevron-right fa-chevron-down');
});

Оформить заказ скрипка пожалуйста.

Обновлен:

Другой способ (возможно, ваш предпочтительный способ): 

$('.accordion').on('show.bs.collapse hide.bs.collapse', function (e) {
    $(this).find('i').first().toggleClass('fa-chevron-right fa-chevron-down');
});
...