Question

我想切换.fa-caret-right TO .fa-caret-down什么是最佳解决方案

<ul id="brief-histories">
    <li class="brief-summary-row emo">
            <a href="#" class="history-head">
                <div class="row">
                    <div class="col-sm-11">2014-02-28 14:51:08</div>
                    <div class="col-sm-1 fa fa-caret-right" history-icon="hide"></div>
                </div>
            </a>

            <div class="content-hide" style="display:none;">
                        28-02-2014    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 

            </div>

    </li>        
        <li class="brief-summary-row emo">
            <a href="#" class="history-head">
                <div class="row">
                    <div class="col-sm-11">2014-02-27 16:18:40</div>
                    <div class="col-sm-1 fa fa-caret-right" history-icon="hide"></div>
                </div>
            </a>

            <div class="content-hide" style="display:none;">
                    27-02-2014   Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    27-02-2014   Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </div>

    </li>        
</ul>

jquery

$('#brief-histories .history-head').click(function(e){
                e.preventDefault();
                $(this).closest('.emo').find('.content-hide').not(':animated').slideToggle(function(){ 
                    $(this).closest('.emo').find('.history-head .fa-caret-right').toggleClass('fa-caret-right');
                });
        });

Demo

Answer 1

.toggleClass（）可以使用2个类名并切换它

$('#brief-histories .history-head').click(function(e){
    e.preventDefault();
    $(this).closest('.emo').find('.content-hide').not(':animated').slideToggle(function(){ 
        $(this).closest('.emo').find('.history-head .fa').toggleClass('fa-caret-right fa-caret-down');
    });            
});

演示：Fiddle

如何在一个元素上切换两个类

1 个答案: