jQuery 升级至 3.7+ 后，$(selector).clone().show() 不再自动覆盖 .dis-none { display: none; } 等 CSS 隐藏规则，需显式移除类或强制重置内联样式才能显示克隆元素。
jquery 升级至 3.7+ 后，`$(selector).clone().show()` 不再自动覆盖 `.dis-none { display: none; }` 等 css 隐藏规则，需显式移除类或强制重置内联样式才能显示克隆元素。
在 jQuery 1.9.1 及更早版本中，.show() 方法会直接设置 display 内联样式（如 display: block），其优先级高于外部 CSS 类（如 .dis-none），因此即使克隆后的元素仍保留 dis-none 类，也能正常显示。但自 jQuery 3.0 起（尤其在 3.4+ 及后续稳定版如 3.7.1 中），.show() 的行为更严格地遵循 CSS 层叠逻辑：它仅清除由 .hide() 或先前 .show() 设置的内联 display 值，而不会覆盖高优先级的 CSS 类声明——这意味着若 .dis-none 已通过样式表定义了 display: none，.show() 将无法绕过它。
✅ 正确做法：克隆后主动干预显示逻辑
你有以下几种可靠方案（无需手动删除 dis-none 类）：
方案 1：使用 .css('display', 'block') 强制覆盖（推荐）
const clonedDialog = $('.dialog').clone().css('display', 'block');
clonedDialog.appendTo('body'); // 克隆体已可见✅ 优点：不依赖类名，直接设置内联样式，优先级高于 CSS 类；兼容所有 jQuery 3.x 版本。
方案 2：链式调用 .removeClass('dis-none').show()
const clonedDialog = $('.dialog').clone().removeClass('dis-none').show();
clonedDialog.appendTo('body');⚠️ 注意：需确保 dis-none 是唯一影响显示的隐藏类；若存在多个隐藏类（如 hidden、d-none），需一并移除。
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
方案 3：先 .show() 再 .appendTo()（仅适用于部分场景）
const clonedDialog = $('.dialog').clone();
clonedDialog.show(); // 此时尚未入 DOM，show 无效（无实际渲染效果）
clonedDialog.appendTo('body'); // 入 DOM 后仍受 .dis-none 影响 → ❌ 不推荐❌ 错误示例：.show() 在未挂载到 DOM 前调用，对最终渲染无实质作用。
? 关键原理澄清
-
clone()仅复制 DOM 结构与属性（含 class），不复制计算样式或内联样式状态； -
.show()并非“万能显示开关”，它本质是display属性的智能恢复器，而非 CSS 优先级覆盖器； - jQuery 3.7+ 更加尊重浏览器原生层叠规则，这是向标准靠拢的合理演进，而非 bug。
✅ 最佳实践建议
// 推荐写法：清晰、健壮、可维护
function showClonedDialog(selector, target = 'body') {
return $(selector)
.clone()
.css('display', 'block') // 强制可见，无视 CSS 类干扰
.appendTo(target);
}
// 使用
showClonedDialog('.dialog');? 提示：若项目中大量使用类似逻辑，建议统一封装为工具函数，并配合
data-*属性标记“可克隆模板”，避免硬编码类名，提升可维护性。
升级 jQuery 是安全且必要的，但需同步更新 DOM 操作逻辑。理解 .show() 的语义变化（从“强制显示”转向“恢复默认显示”），是平滑迁移的关键。
