Question

以下代码实现了对所选元素的上下滑动操作。但由于某些原因，在滑动之后，fa-chevron-down字体真棒图标不会显示：

function showHideChatBox(element){
        var e = jQuery(element).parents(".box1").children(".box1-body");
        var t = 0;

        if(jQuery(element).hasClass("collapse")) {
            jQuery(element).removeClass("collapse").addClass("expand");
            t = jQuery(element).children(".fa-chevron-down");
            t.removeClass("fa-chevron-down").addClass("fa-chevron-up"); 
            e.slideUp(200);
        }

        else {
            jQuery(element).removeClass("expand").addClass("collapse");
            t = jQuery(element).children(".fa-chevron-up");
            t.removeClass("fa-chevron-up").addClass("fa-chevron-down");
            e.slideDown(200);
        }
}

Answer 1

我认为你没有正确接近这个，你应该引用切换类来正确地切换＆＃39;切换＆＃39;字体真棒雪佛龙图标。尝试使用jQuery切换类，如下所示：

JS

$(function () {
    $('.dropdown_icon').click(function () {
        $("#dropdown").slideToggle('fast');
        $(this).children(".fa-chevron-down, .fa-chevron-up").toggleClass( 'fa-chevron-down fa-chevron-up'); 
    });
});

这是此问题答案的简化版本：Change class on inactive icon - jquery

HTML

<div id="header">
    <ul class="hdr_link_icons">
        <li class="dropdown_icon">
            Dropdown<i class="fa fa-chevron-down"></i>
        </li>
    </ul>    
    <ul class="dropdown_area" id="dropdown">
        <li><a href="">Your Account <span class="hdr_link_arrow">&#187;</span></a></li>
        <li><a href="">Corporate Sales <span class="hdr_link_arrow">&#187;</span></a></li>
        <li><a href="">Got a voucher? <span class="hdr_link_arrow">&#187;</span></a></li>
    </ul>
</div>

CSS

body { margin:0; padding:0; }
ul { margin:0; padding:0; }
#header { height:auto; width:100%; overflow:hidden; border-bottom:1px dashed #c1c1c1; padding:5px 0; }
#header .header_logo { height:40px; width:auto; float:left; }
#header .hdr_link_icons { height:40px; width:auto; float:right; list-style:none; background-color: yellow; }
#header .hdr_link_icons li { height:40px; width:70px; float:right; list-style:none; border-right:1px solid #ebebeb; padding:0 0 0 5px; cursor:pointer; position:relative; }
#header .hdr_link_icons li i { position:absolute; right:7px; top:15px; color:#666666; }
#header .hdr_dropdown_area { height:auto; width:100%; background:#F5F2F2; border-top:5px solid #712D55; position:absolute; top:51px; right:0; }
#header .hdr_dropdown_area li { height:auto; float:none; border-bottom:1px dotted #c1c1c1; font-family:tahoma, arial; padding:10px 0; margin:0 0 0 10px !important; text-align:left; text-transform:capitalize; }
#header .hdr_dropdown_area li:last-child { border:none; }
#header .hdr_dropdown_area li a { color:#333333; text-decoration:none; }
#header .dropdown_area { display:none; }

在上滑动作后，不显示字体真棒图标

1 个答案: