Est-il possible d'imprimer un DIV caché par la fonction "slideUp" de jQuery?

Question

J'ai une simple page de type "accordéon" contenant une liste d'en-têtes H3 et de boîtes de contenu DIV (chaque H3 est suivi d'un DIV). Sur cette page, je commence avec tous les DIVs cachés. Quand un H3 est cliqué, la DIV directement au-dessous (après) est révélée avec la fonction "slideDown" de jQuery tandis que toutes les autres DIV sont cachées avec la fonction "slideUp".

La fonction « slideUp » insère le style en ligne suivant dans les DIVs spécifiées:

style="display: none;" 

Je me demande s'il y a une façon pour moi de montrer tous les DIVs élargi lorsqu'un utilisateur imprime la page (comme Je fais quand un utilisateur a JavaScript désactivé). Je pense que c'est impossible parce que le style en ligne aura toujours préséance sur toute autre déclaration de style.

Existe-t-il une autre solution?

Solution

Sugendran's solution est grande et travaille, je l'ai testé jusqu'à présent dans les navigateurs (FF2, IE7 et IE6). Je n'étais pas au courant qu'il y avait un moyen de contourner les styles en ligne dont je suis sûr que c'est quelque chose que j'ai regardé auparavant, donc c'est génial de le savoir. Je vois aussi qu'il y a this answer here à ce sujet. Je souhaite que la recherche ne soit pas si difficile à naviguer ici :-).

Lee Theobald's solution serait génial mais la fonction "slideUp" ajoute le style = "display: none;" bit.

My solution Fonctionne correctement, mais est trop lourde lorsque la déclaration! Important fonctionne.

Answer 1

Vous pouvez utiliser la clause! Important dans CSS. Cela remplacera le style en ligne.

Donc, si vous configurez un support d'impression stylesheet - vous pouvez faire quelque chose comme

div.accordian { display:block !important; } 

Answer 2

Oui.

On charge ajouter une classe (par exemple "HideMe") à tous DIVs pertinents comme ceci:

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

NB: Cela signifie que l'accordéon se dégrade bien lorsque JavaScript est désactivé.

De cette façon, vous pouvez avoir votre stylesheet régulière spécifier la classe "HideMe" comme ceci:

.hideme { display: none; } 

Bien que votre impression stylesheet peut spécifier la classe "HideMe" comme ceci:

div.hideme { display: block; } 

Ensuite, dans la fonction 'click' que vous ajoutez à chaque H3, après avoir glissé les DIVs, ajoutez la classe "hideme" puis supprimez l'attribut "style" de chaque DIV qui a été glissé.

Le jQuery global pour cela ressemble à ceci:

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

Notez la nécessité d'inclure le rappel de la fonction dans la fonction slideUp de telle sorte que le style et les changements de classe se produisent après la DIV a glissé et jQuery a ajouté "style = display: none;"

Answer 3

personnellement je le fais d'une manière différente. Au lieu que le JQuery ajoute le style en ligne, pourquoi ne pas l'ajouter pour ajouter une classe à la place?

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

Ensuite, vous pouvez avoir deux feuilles de style: un pour l'écran, une pour l'impression:

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

Dans votre screen.css vous souhaitez définir fermé ...

div.closed { display: none; } 

Mais dans votre print.css vous ne le feriez pas (ou vous omettre l'affichage: aucun). De cette façon, quand il s'agit d'imprimer tous les divs seront étendus mais à l'écran, ils seraient fermés.

Answer 4

{display: block! Important; } fonctionne en FF, mais j'ai lu quelque part qu'il ne fonctionnerait pas avec IE6. N'y a-t-il pas d'événement javascript pour l'impression? Je me souviens avoir regardé longuement avant et ne pouvait pas trouver un, il semble fou que cela n'existe pas, js semble savoir quand quelque chose d'autre se passe dans le navigateur, mais est aveugle à l'impression pour une raison quelconque :(

cravant @ mimoYmima.com

Answer 5

Faire 'affichage bloc' tous les éléments à l'intérieur de l'accordéon couvrira tous les divs intérieur

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