Jquery slidedown 切换点击时更改按钮文本和图标

Question

向下滑动功能很好，但我需要在单击按钮时将按钮中的文本和超赞字体图标从 'open all questions (down icon)' 更改为 'Close all questions (up icon)'，然后恢复为 'open all questions' 关闭。谢谢！ [

$(document).ready(function(){
    
    $("#showNavBut").click(function() {
                $("#showNav").slideToggle();
        
                if ( $('#showNav').css('display').display == 'block' ) {
                  $('#showNavBut').html('Close all questions <i class="fas fa-chevron-up" aria-hidden="true"></i>'); // Change button text
          
                }
                else {
                  $('#showNavBut').html('Open all questions <i class="fas fa-chevron-down" aria-hidden="true"></i>'); // Change button text
                }
        
                });
    
    });

#showNav {display: none;}

<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="showNav">
                    <div class="#">
                        
            <a href="#">Confidence Household 1</a>
            <a href="#">Confidence Household 2</a>
            <a href="#">Confidence Household 3</a>
            <a href="#">Confidence-Household 3</a>
           
                    </div>
</div>
                
<button id="showNavBut" class="show-nav-but" style="width: auto;">Open all questions <i class="fas fa-chevron-down" aria-hidden="true"></i></button>

            </div>

]1

Answer 1

看起来问题是你没有等待 showNav 进入 block/none 状态，在按下按钮的那一刻它有一个状态，但是执行slideToggle需要一些时间，可以直接使用回调函数，在执行slideToggle[=13后改变按钮的状态=]

$(document).ready(function () {
    $("#showNavBut").click(function (event) {
        $("#showNav").slideToggle(500, function () {
      if ($('#showNav').is(':visible')) {
        $(event.currentTarget).html('Close all questions <i class="fas fa-chevron-up" aria-hidden="true"></i>');
      } else {
        $(event.currentTarget).html('Open all questions <i class="fas fa-chevron-down" aria-hidden="true"></i>');
      }
    });
    });
});

#showNav {
  display: none;
 }

<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="showNav">
  <div class="#">
    <a href="#">Confidence Household 1</a>
    <a href="#">Confidence Household 2</a>
    <a href="#">Confidence Household 3</a>
    <a href="#">Confidence-Household 3</a>
  </div>
</div>
                
<button id="showNavBut" class="show-nav-but" style="width: auto;">Open all questions <i class="fas fa-chevron-down" aria-hidden="true"></i></button>

Jquery slidedown 切换点击时更改按钮文本和图标

Jquery slidedown toggle change button text and icon when clicked

css

jquery

toggle

slidedown