如何实现点击时仅切换Font Awesome图标且固定显示Categories文字

完全可以实现，原代码的问题在于点击时会重写整个h1元素的内容、主动修改文字内容，你只需要修改JS逻辑，仅切换Font Awesome图标的类名、不触碰文字部分即可，不需要修改HTML代码。

修改后的JS代码 #

function arata_ascunde(h1) {
    var x = $('#showhide');
    var $icon = $(h1).find('i');
    // 仅切换图标类，不修改文字
    if ($icon.hasClass('fa-chevron-down')) {
        $icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
        x.fadeIn();
    } else {
        $icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
        x.fadeOut();
    }
}

修改说明 #

• 不再移除原有图标元素，也不会重写h1内的文字内容，「Categories」会全程固定显示
• 直接通过判断图标的当前类名决定切换方向，逻辑更精准，不需要依赖文本判断
• 保留了原有列表的淡入淡出动画效果，和原有交互逻辑一致

内容的提问来源于stack exchange，提问作者Chad