css - 为什么打印时页面元素不会保持隐藏状态？

Question

我有一个正在开发的网站，其中有一个“打印页面”按钮。当页面打印时，我想隐藏页面的某些元素（例如左侧导航、顶部导航等...）。

我已将此添加到我的 style.css 中：

@media print {
  #topnav { display:none }
  #left-col { display:none }
}

但是，当我去查看页面的打印预览时，那些元素仍然存在。

任何帮助将非常感激！

Answer 1

我想到了。这是我的一个编码错误。我的样式表的原始链接如下所示：

<link href="/style.css" rel="stylesheet" type="text/css" media="screen" />

并引起了冲突。一旦我删除media="screen"它就可以完美运行。

Answer 2

您可以尝试以下代码：

代码

<input type="submit" id="print" value="Submit">

JS代码

$(document).ready(function(){
  $('#print').on('click', function(){
        $('selector i.e #leftnav, #topnav').die();
     });
  });

或者

$('selector i.e #leftnav, #topnav').hide();