使用jQuery实现可折叠div时caret图标切换异常如何解决

• 调用slideToggle()后立刻判断内容块可见状态，slideToggle()为渐变动画，默认执行时长400ms，状态判断在动画未完成时执行，拿到的是中间状态，与最终状态不符，导致图标类名切换错误。
• 使用全局选择器$('.collapsible-content')和$('i')，若页面存在多个折叠模块会触发所有模块的图标同步切换，即使仅单个模块也建议使用相对当前点击元素的选择器，逻辑更严谨。

方案1：动画完成后判断状态（适合需要依赖动画完成状态做其他操作的场景） #

$('.collapsible-heading').click(function() {
  const $content = $(this).next('.collapsible-content');
  const $icon = $(this).find('i');
  $content.slideToggle(function() {
    if ($(this).is(':visible')) {
      $icon.addClass('fa-caret-down').removeClass('fa-caret-left');
    } else {
      $icon.addClass('fa-caret-left').removeClass('fa-caret-down');
    }
  });
});

方案2：直接切换类名（更简洁，无动画等待） #

利用toggleClass特性直接切换两个类名的状态，不需要手动判断内容可见性，不受动画时长影响：

$('.collapsible-heading').click(function() {
  $(this).next('.collapsible-content').slideToggle();
  $(this).find('i').toggleClass('fa-caret-down fa-caret-left');
});

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