点击显示隐藏搜索框时搜索图标无法切换为X关闭图标问题求助

要实现点击切换搜索/X图标，只需做两处核心修改：

1. 调整CSS规则，移除覆盖font-awesome图标显示的代码 #

删除CSS文件中如下代码段：

.sb-icon-search:before {
    content: "";
}

可选优化：如果图标位置显示异常，可调整.sb-icon-search样式：将height:0px改为height:50px，新增line-height:50px属性，保证图标垂直居中。

2. 修改JavaScript点击事件，增加图标切换逻辑 #

找到JS中submitIcon.click绑定的事件函数，修改为如下代码：

submitIcon.click(function(){
    if(isOpen == false){
        searchBox.addClass('sb-search-open');
        qutu.removeClass('noborder');
        qutu.addClass('bborder');
        // 切换为X图标
        $('.sb-icon-search i').removeClass('fa-search').addClass('fa-times');
        isOpen = true;
    } else {
        searchBox.removeClass('sb-search-open');
        qutu.removeClass('bborder');
        qutu.addClass('noborder');
        // 切换回搜索图标
        $('.sb-icon-search i').removeClass('fa-times').addClass('fa-search');
        isOpen = false;
    }
});

修改完成后即可实现预期效果：点击搜索图标展开搜索框时自动切换为X图标，点击X收起搜索框时切回搜索图标。

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