jQuery slideToggle点击时同步切换按钮文本与Font Awesome图标实现

• 状态判断语法错误：$('#showNav').css('display') 直接返回display属性的字符串值，你代码中额外多写的.display会读取到undefined，导致判断逻辑永远不会命中block的分支。
• 状态判断时机错误：slideToggle是带过渡的异步动画，调用后立即读取元素的display属性，拿到的是动画执行前的旧状态，会导致按钮内容和实际的展开/收起状态不同步。

仅需要替换原有JS代码即可，CSS、HTML无需调整：

$(document).ready(function(){
    $("#showNavBut").click(function() {
        // 把状态判断放到slideToggle的回调函数中，等动画完全执行完成后再修改按钮内容
        $("#showNav").slideToggle(function() {
            if ($(this).css('display') === 'block') {
                $('#showNavBut').html('关闭所有问题 <i class="fas fa-chevron-up" aria-hidden="true"></i>');
            } else {
                $('#showNavBut').html('打开所有问题 <i class="fas fa-chevron-down" aria-hidden="true"></i>');
            }
        });
    });
});

如果需要保留英文按钮文本，把对应中文修改为Close all questions和Open all questions即可。

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