jQuery 隐藏/显示不能很好地与@media print 配合使用

Question

我有一个网页，它使用 jQuery 的 hide() 和 show() 函数来隐藏和显示各种片段以响应用户操作。如果用户打印该页面，我希望显示所有这些部分，并且我的样式表中有一个 @media print 部分可以做到这一点。然而，jQuery 的函数覆盖了它。我该如何解决这个问题？

Answer 1

html

<div class="pieces">hello world</div>

如果使用 jQuery hide(); 它将输出

<div class="pieces" style="display: none;">hello world</div>

声明的样式属性及其优先于此处的其他属性。所以有一个解决方案，添加一个类 display:none;

<style>
.hide{display:none;}

@media print{

    .hide{display:block;}
}
</style>
<div class="pieces hide">hello world</div>

使用 $('.pieces').addClass('hide') 代替 $('.pieces').hide()

$('.pieces').removeClass('hide') 而不是 $('.pieces').show()

打印演示 http://jsfiddle.net/abj01sa7/3/show/