использование JQuery для события beforeprint

Question

У меня есть следующая функция.

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

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

Для этого HTML

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

У меня есть несколько блоков контента на странице, но когда я делаю предварительный просмотр или печать, я вижу, как все элементы div скользят вниз, прежде чем открывать предварительный просмотр или печать, но в реальном предварительном просмотре или распечатке все они разрушаются.

Кто-нибудь знает, почему это так?

Спасибо.

Answer 1

Вам необходимо использовать таблицу стилей печати, например,

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

Вы можете создавать стили специально для того, как вы хотите, чтобы печатная страница выглядела без необходимости использовать JS, чтобы что-то с ней делать.

Answer 2

CSS-медиа работает только для презентации, если JavaScript не использует объект стиля или метод jQuery css, вы не можете изменить отключение JavaScript с помощью CSS.

Вам нужно просто привязать событие unprint к окну документа перед печатью, в общем, jquery просто сбрасывает и имеет имя события в нижнем регистре.

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

$( window ).bind( "beforeprint", expandAll );

// Anonymous would look like

$( window ).bind( "beforeprint", function() { 
    $(".fieldset:gt(0)").slideDown("fast"); 
});