如何用JavaScript+jQuery实现details手风琴平滑展开（HTML不可修改）

问题出在原生<details>的默认展开/收起行为会和jQuery动画冲突，导致你遇到的两种异常情况：

• 直接调用slideToggle时，原生瞬间完成显示切换，jQuery动画被覆盖，看不到平滑效果
• 点击<summary>后没阻止默认行为，原生先快速展开内容，接着jQuery动画又触发收起，就出现了“展开后马上收起”的反向效果

下面是可行的解决方案，不用改HTML，只需要替换你的jQuery代码：

// 拦截summary的点击事件，阻止原生行为
$(document).on('click', 'summary', function(e) {
  e.preventDefault();
  const $details = $(this).closest('details');
  // 选中details里除了summary之外的内容容器（根据你的实际HTML结构调整选择器，确保正确选中要动画的内容）
  const $content = $details.children().not('summary');

  if ($details.attr('open')) {
    // 收起：先滑动画，完成后移除open属性
    $content.slideUp(300, function() {
      $details.removeAttr('open');
    });
  } else {
    // 展开：先添加open属性，再滑动画显示内容
    $details.attr('open', '');
    $content.hide().slideDown(300);
  }
});

关键说明： #

1. 阻止默认行为：用e.preventDefault()关掉原生<details>的瞬间展开逻辑，避免和jQuery动画冲突
2. 手动控制open属性：保持<details>的原生语义，同时配合动画完成状态同步修改属性
3. 内容选择器适配：如果你的内容是嵌套在某个容器里（比如<div class="content">），把$content的选择器改成$details.find('.content')更准确，确保只对需要动画的部分生效

如果你的内容是多个直接子元素，也可以初始化时临时把它们包成一个容器（不修改原HTML结构，仅DOM操作），避免多个元素各自动画的混乱：

// 仅页面加载时执行一次，统一包裹内容
$('details').each(function() {
  $(this).children().not('summary').wrapAll('<div class="details-content"></div>');
});

// 后续动画选中这个统一容器
const $content = $details.find('.details-content');

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