使用jQuery slideUp实现details组件平滑折叠失效问题排查

为原生details组件添加slideUp/slideDown平滑过渡效果时，展开滑动正常，但收起时是瞬间闭合。控制台无报错，无法定位问题。相关代码如下：

HTML代码 #

<div class="outreach">
<details class="outreach-tab">
  <summary class="tab-title">
    Detail Header
  </summary>
  <div class="prose max-w-none outreach-details">
    Vestibulum vitae suscipit magna, in vehicula neque. Morbi ut dolor lorem. Quisque mattis metus rhoncus massa mollis imperdiet. Sed eleifend risus metus, id suscipit nisi dictum id. Vestibulum rhoncus dui vitae nunc pellentesque, vitae pellentesque neque condimentum. 
  </div>
</details>
</div>

SCSS代码 #

.resource,
.outreach {
  .outreach-tab {
    summary {
      padding: 20px;
      background: #ccdbe5;
      border-bottom: 1px solid #333333;
      cursor: pointer;
      font-size: 120%;
      font-weight: bold;
      
      text-transform: uppercase;
      position: relative;
    }

    .outreach-details {
      background: #ffffff;
      padding: 20px;
      margin-top: 10px;
      display: none; /* Hidden by default */
    }
  }
}

JS代码（原问题代码） #

jQuery(document).ready(function ($) {
  $("details").on("toggle", function () {
    const detailsElement = $(this).find(".outreach-details");

    if (this.open) {
      detailsElement.slideDown();
    } else {
      detailsElement.slideUp();
    }
  });
});

问题根源是原生details的默认行为会在toggle事件触发时立即隐藏内容，覆盖了jQuery的slideUp动画。需手动控制组件状态，避免原生行为干扰：

修改后的JS代码：

jQuery(document).ready(function ($) {
  $("details").on("toggle", function (e) {
    e.preventDefault(); // 阻止原生默认收起/展开行为
    const $details = $(this);
    const content = $details.find(".outreach-details");

    if ($details.prop("open")) {
      // 先执行slideUp动画，完成后再标记为收起状态
      content.slideUp(() => {
        $details.prop("open", false);
      });
    } else {
      // 先标记为展开状态，再执行slideDown动画
      $details.prop("open", true);
      content.slideDown();
    }
  });
});

核心逻辑：通过preventDefault()阻止details的原生切换行为，完全由JS控制动画流程和open属性的更新时机，确保slideUp动画完整执行后再改变组件状态。

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