jQuery hide / show与@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/