Czy jest możliwe wydrukowanie DIV, który jest ukryty przez funkcję "slideUp" jQuery

Question

Mam prostą stronę typu "akordeon" zawierającą listę nagłówków H3 i pól treści DIV (po każdym H3 następuje DIV). Na tej stronie zaczynam od ukrytych wszystkich DIV. Po kliknięciu H3, DIV bezpośrednio poniżej (po) jest ujawniane za pomocą funkcji jQuery: "slideDown", podczas gdy wszystkie inne DIV są ukryte za pomocą funkcji "slideUp".

Funkcja „slideUp” wstawia się następujący styl inline do określonych DIV:

style="display: none;" 

Zastanawiam się, czy istnieje jakikolwiek sposób dla mnie, aby pokazać wszystkie DIV rozszerzać, gdy użytkownik drukuje stronę (jak Robię, gdy użytkownik ma wyłączoną obsługę JavaScript).

Myślę, że to niemożliwe, ponieważ styl inline będzie zawsze miał pierwszeństwo przed każdą inną deklaracją stylu.

Czy istnieje inne rozwiązanie?

Rozwiązanie

Sugendran's solution jest wielki i działa w przeglądarkach (FF2, IE7 i IE6) Mam testowanych do tej pory. Nie zdawałem sobie sprawy, że istnieje jakikolwiek sposób na zastąpienie wbudowanych stylów, co do których jestem pewien, jest czymś, co sprawdziłem wcześniej, więc jest to wspaniałe, aby się dowiedzieć. Widzę też, że w tej sprawie jest this answer here. Żałuję, że wyszukiwanie tutaj nie było tak trudne :-).

Lee Theobald's solution byłby świetny, ale funkcja "slideUp" dodaje styl = "display: none;" kawałek.

My solution działa dobrze, ale jest przesadą, gdy ważna deklaracja działa.

Answer 1

Możesz użyć! Ważnej klauzuli w CSS. Spowoduje to zastąpienie stylu wbudowanego.

Więc jeśli konfiguracja druk mediów stylów - można zrobić coś takiego

div.accordian { display:block !important; } 

Answer 2

Tak.

Na obciążenia dodać klasę (np „hideme”) do wszystkich odpowiednich div tak:

$('div#accordion> div').addClass('hideme'); 

UWAGA: Oznacza to, że akordeon degraduje dobrze, gdy jest wyłączona obsługa JavaScript.

W ten sposób można mieć regularny stylów określić „hideme” klasy tak:

.hideme { display: none; } 

Podczas gdy stylów wydruku można określić „hideme” klasy tak:

div.hideme { display: block; } 

Następnie w funkcji "kliknięcia" dodajesz do każdego H3, po wysunięciu DIV, dodaj klasę "hideme", a następnie usuń atrybut "style" z każdego DIV, który został przesunięty w górę.

Ogólnym jQuery na ten wygląda następująco:

<script type="text/javascript"> 
//<![CDATA[ 
    $(function() { 
     $('#accordion> div').addClass('hideme'); 

     $('#accordion> h3').click(function() { 
      $(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast', function(){ $('#accordion> div:hidden').addClass('hideme').removeAttr('style'); }); 

     }); 
    }); 
//]]> 
</script> 

Uwaga potrzeba obejmują zwrotnego funkcji w funkcji slideUp tak, że zmiany stylu i klasy wystąpić po DIV jest przesuwany w górę i jQuery dodała "style = display: none;"

Answer 3

bym osobiście to zrobić w inny sposób. Zamiast JQuery dodając wbudowany styl, może zamiast tego dodać klasę?

<div class="closed">...</div> 

Wtedy można mieć dwóch stylów: jeden na ekranie, jeden do druku:

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

W swojej screen.css chcesz zdefiniować zamknięte ...

div.closed { display: none; } 

Ale w twoim pliku print.css nie (lub pominiesz ekran: brak). W ten sposób, jeśli chodzi o drukowanie, wszystkie elementy div zostaną rozwinięte, ale na ekranie zostaną zamknięte.

Answer 4

{display: block! Important; } działa w FF, ale czytałem gdzieś, że nie będzie działało z ie6. Czy nie ma zdarzenia javascript do drukowania? Pamiętam, że szukałem obszernie jednego z nich i nie mogłem go znaleźć, wydaje się szalone, że to nie istnieje, js wydaje się wiedzieć, kiedy cokolwiek innego dzieje się w przeglądarce, ale jest niewidoczne z powodu drukowania :(

Brent @ mimoYmima.com

Answer 5

Making „wyświetlanie jako blok” wszystkich elementów wewnątrz akordeon obejmie wszystkie div wewnątrz

#accordion > *{ display:block !important; }