Ist es möglich, ein DIV zu drucken, das durch jQuerys "slideUp" -Funktion versteckt ist?

Question

Ich habe eine einfache "Akkordeon" -Typ-Seite mit einer Liste von H3-Headern und DIV-Inhaltsfeldern (auf jedes H3 folgt ein DIV). Auf dieser Seite starte ich mit allen versteckten DIVs. Wenn ein H3 angeklickt wird, wird das DIV direkt unterhalb (nach) mit der "slideDown" Funktion von jQuery angezeigt, während alle anderen DIVs mit der "slideUp" Funktion ausgeblendet werden.

Die „slideUp“ Funktion fügt den folgenden Inline-Stil in den angegebenen DIVs:

style="display: none;" 

Ich frage mich, ob es eine Möglichkeit für mich ist, erweitert alle DIVs zu zeigen, wenn ein Benutzer die Seite druckt (wie Ich mache das, wenn ein Benutzer JavaScript deaktiviert hat).

Ich denke, es ist unmöglich, weil der Inline-Stil immer Vorrang vor jeder anderen Stil Deklaration hat.

Gibt es eine andere Lösung?

Lösung

Sugendran's solution ist groß und arbeitet in den Browsern (FF2, IE7 und IE6) ich bisher getestet habe. Mir war nicht bewusst, dass es einen Weg gibt, Inline-Styles zu überschreiben, was ich ziemlich sicher schon einmal gesehen habe, also ist das großartig, um das herauszufinden. Ich sehe auch, dass es diesbezüglich this answer here gibt. Ich wünschte, die Suche war nicht so schwierig hier zu navigieren :-).

Lee Theobald's solution wäre toll, aber die "slideUp" -Funktion fügt die style = "display: none;" Bit.

My solution funktioniert gut, aber ist übertrieben, wenn die! Wichtige Erklärung funktioniert.

Answer 1

können Sie die Verwendung! Wichtige Klausel in CSS. Dies überschreibt den Inline-Stil.

Also, wenn Sie Setup ein Printmedien Sheet - Sie so etwas wie

div.accordian { display:block !important; } 

Answer 2

Ja.

Auf Last fügen Sie eine Klasse (zum Beispiel „HideMe“) auf alle relevanten DIVs wie so:

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

NB: Das bedeutet, dass das Akkordeon in Ordnung verschlechtert, wenn es deaktiviert ist.

Auf diese Weise können Sie Ihre regelmäßigen Sheet geben Sie die „HideMe“ Klasse wie folgt haben:

div.hideme { display: block; } 

:

.hideme { display: none; } 

Während Ihr Drucksheet die „HideMe“ Klasse wie folgt angeben

Als nächstes wird in der ‚Klick‘ Funktion, die Sie jeden H3 hinzufügen, nachdem die DIVs Schiebetüren oben, fügen Sie den „HideMe“ Klasse und entfernen Sie dann den „Stil“ Attribut von jedem DIV, die bis gerutscht war.

Die Gesamt jQuery dafür sieht wie folgt aus:

<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> 

Beachten Sie die Notwendigkeit, die Callback-Funktion in der slideUp Funktion enthalten, so dass die Art und Klassenänderungen auftreten, nachdem der DIV slided up hat und jQuery hinzugefügt "Stil = Anzeige: keine;"

Answer 3

tun kann, würde ich persönlich tun dies auf eine andere Weise. Anstatt die JQuery den Inline-Stil hinzuzufügen, warum sollte man nicht stattdessen eine Klasse hinzufügen?

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

Dann können Sie zwei Sheets haben: eine für den Bildschirm, einen für Druck:

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

In Ihrem screen.css Sie geschlossen definieren würde ...

div.closed { display: none; } 

Aber in deiner print.css würdest du nicht (oder du würdest die Anzeige weglassen: keine). Auf diese Weise werden beim Drucken alle Divs erweitert, aber auf dem Bildschirm werden sie geschlossen.

Answer 4

{Anzeige: Block! Wichtig; } funktioniert in FF, aber ich habe irgendwo gelesen, dass es mit ie6 nicht funktionieren würde. Gibt es kein JavaScript-Ereignis zum Drucken? Ich erinnere mich, ausgiebig nach einem zuvor zu suchen und konnte keinen finden, es scheint verrückt, dass das nicht existiert, js scheint zu wissen, wenn noch etwas anderes im Browser passiert, aber aus irgendeinem Grund blind für das Drucken ist :(

brent @ mimoYmima.com

Answer 5

macht 'Anzeige als Block' all Elemente innerhalb des Akkordeons decken alle innerhalb divs

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