Question

我有以下功能。

$(function() {
    $(".sectionHeader:gt(0)").click(function() {
        $(this).next(".fieldset").slideToggle("fast");
    });
    $("img[alt='minimize']").click(function(e) {
        $(this).closest("table").next(".fieldset").slideUp("fast");
        e.stopPropagation();
        return false;
    });
    $("img[alt='maximize']").click(function(e) {
        $(this).closest("table").next(".fieldset").slideDown("fast");
        e.stopPropagation();
        return false;
    });
});

<script type="text/javascript">
     window.onbeforeprint = expandAll;

     function expandAll(){
       $(".fieldset:gt(0)").slideDown("fast");
      }
</script>

对于这个html

    <table class="sectionHeader" ><tr ><td>Heading 1</td></tr></table>
     <div style="display:none;" class="fieldset">Content 1</div>

 <table class="sectionHeader" ><tr ><td>Heading 2</td></tr></table>
     <div style="display:none;" class="fieldset">Content 2</div>

我在页面上有几个div class =“fieldset”，但是当我打印预览或打印时，我可以看到所有div在打开打印预览或打印之前向下滑动，但在实际打印预览或打印输出时它们是一切都崩溃了。

如果有人为此提供解决方案，我将不胜感激。

任何人都知道为什么会这样或如何解决它？

感谢。

PS：使用a也不起作用（我假设因为jquery使用切换）而不是我正在寻找的那种问题。

Answer 1

更简单的方法是在CSS中，您可以使用不同的打印样式而不是像这样的屏幕：

@media print {
  .fieldset { display: block; }
}

@media screen {
  .fieldset { display: none; }
}

.fieldset类将在打印时显示，但默认情况下不会在浏览器中显示。请务必在页面中的diplay: none div上取出您的内嵌.fieldset样式，因为它们会在CSS文件中覆盖其中任何一个。

Answer 2

我强烈建议您不要使用此技术进行打印。您需要依赖于无需javascript即可打印的设置。

虽然使用以下方法可以将您要使用的方法标记为聪明：

<style type="text/css" media="print">  css to modify for print  </style>

即使没有javascript，也可以确保您的扩展面板可以打印。

Answer 3

JavaScript解决方案可用于不需要使用onbeforeprint event（某些浏览器不支持），但使用window.matchMedia API。

var mql = window.matchMedia("print");
mql.addListener(function(mql){
  if(mql.matches){
     // on before print
  }else{
     // on after print
  }
});

为什么jquery有onbeforeprint事件的问题？

3 个答案: