jQuery clone().show()在1.9.1与3.7.1版本表现差异及解决方案咨询

问题原因 #

jQuery 3.x 对show()方法的实现做了关键调整：

• 旧版本（如1.9.1）中，show()会直接为元素添加内联样式display（根据元素类型设置为block、inline等），由于内联样式优先级高于CSS类，因此能覆盖.dis-none的display: none。
• 3.x版本中，show()仅移除元素的内联display: none样式，不会主动设置display值。此时CSS类.dis-none的display: none会生效，导致元素仍处于隐藏状态。

解决方案（不移除.dis-none类前提下） #

方案1：调用show()后手动指定内联display值 #

利用内联样式优先级高于CSS类的特性，在show()后主动设置元素的默认display值（根据元素类型调整，比如block、inline-block）：

var dialogDiv = $(`.dialog`).clone().show().css('display', 'block');

方案2：自定义全局show()方法兼容旧行为 #

如果需要全局保持旧版本show()的覆盖逻辑，可以重写jQuery的show()方法，让它主动设置元素的默认display值：

(function($) {
  const originalShow = $.fn.show;
  $.fn.show = function() {
    const result = originalShow.apply(this, arguments);
    this.each(function() {
      const $elem = $(this);
      if (!$elem.is(':visible')) {
        // 克隆元素并移除隐藏类，获取其默认display值
        const defaultDisplay = $elem.clone().removeClass('dis-none').css('display');
        $elem.css('display', defaultDisplay);
      }
    });
    return result;
  };
})(jQuery);

// 调用方式不变
var dialogDiv = $(`.dialog`).clone().show();

方案3：使用toggle(true)替代show() #

toggle(true)的行为与旧版本show()一致，会主动设置内联display以覆盖CSS类的隐藏规则：

var dialogDiv = $(`.dialog`).clone().toggle(true);

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