Как переключить шрифт на компьютер?

Я использую шрифт awesome значок "плюс" в элементах списка расширяемых категорий. Когда они находятся в расширенном состоянии, я хочу показать знак "минус"

HTML

<ul id="category-tabs">
    <li><a href="javascript:void"><i class="fa fa-fw"></i>Category 1</a>
        <ul>
            <li><a href="javascript:void">item 1</a></li>
            <li><a href="javascript:void">item 2</a></li>
            <li><a href="javascript:void">item 3</a></li>
        </ul>
    </li>
</ul>

Jquery

$('#category-tabs li a').click(function(){
    $(this).next('ul').slideToggle('500');
});

Ответ 1

Вы можете переключить класс элемента i в нажатом якоре, например

<i class="fa fa-plus-circle"></i>

затем

$('#category-tabs li a').click(function(){
    $(this).next('ul').slideToggle('500');
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle')
});

Демо: Fiddle

Ответ 2

Просто вызовите jQuery toggleClass() в элементе i, содержащемся в вашем элементе a, чтобы переключить значки плюс и минус:

...click(function() {
    $(this).find('i').toggleClass('fa-minus-circle fa-plus-circle');
});

Обратите внимание, что это предполагает, что по умолчанию элемент fa-plus-circle добавлен в ваш элемент i.

демонстрация JSFiddle.

Ответ 3

Вы можете изменить код, используя определение класса для элемента i:

<a href="javascript:void"><i class="fa fa-plus-circle"></i>Category 1</a>

Затем вы можете переключать классы, представляющие состояние плюса/минуса, используя toggleClass с несколькими классами:

$('#category-tabs li a').click(function(){
    $(this).next('ul').slideToggle('500');
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle');
});

Демо: http://jsfiddle.net/Zcn2u/

Ответ 4

Есть еще одно решение, которое вы можете попробовать, используя только css, вот ответ, который я опубликовал в другом сообщении: jQuery Accordion сменит шрифт удивительного класса значка на клик

Ответ 5

Обычно и просто он работает следующим образом:

<script>
            $(document).ready(function () {
                $('i').click(function () {
                    $(this).toggleClass('fa-plus-square fa-minus-square');
                });
            });
</script>