Es posible imprimir un DIV que está oculto por la función "slideUp" de jQuery

Question

Tengo una página simple tipo "acordeón" que contiene una lista de encabezados H3 y cuadros de contenido DIV (cada H3 es seguido por un DIV). En esta página, comienzo con todos los DIV ocultos. Cuando se hace clic en un H3, el DIV directamente debajo (después) se revela con la función "slideDown" de jQuery, mientras que todos los demás DIV se ocultan con la función "slideUp".

La función "slideUp" inserta el siguiente estilo en línea en los DIVs especificados:

style="display: none;" 

Me gustaría saber si hay alguna manera para mí para mostrar todos los DIVs expanden cuando un usuario imprime la página (como se Lo hago cuando un usuario tiene JavaScript desactivado).

Estoy pensando que es imposible porque el estilo en línea siempre tendrá prioridad sobre cualquier otra declaración de estilo.

¿Hay alguna otra solución?

Solución

Sugendran's solution es grande y funciona en los navegadores (FF2, IE6 y IE7) que he probado hasta ahora. No sabía que hubiera alguna forma de anular los estilos en línea, estoy bastante seguro de que es algo que he buscado antes, así que es genial averiguarlo. También veo que hay this answer here con respecto a esto. Desearía que la búsqueda no fuera tan difícil de navegar aquí :-).

Lee Theobald's solution sería genial, pero la función "slideUp" agrega el estilo = "display: none;" poco.

My solution funciona bien, pero es exagerado cuando funciona la declaración! Important.

Answer 1

Puede usar la cláusula! Important en CSS. Esto anulará el estilo en línea.

Así que si usted fija una hoja de estilo medios impresos - se puede hacer algo como

div.accordian { display:block !important; } 

Answer 2

Sí.

En carga añadir una clase (por ejemplo, "HideMe") a todos los DIVs relevantes de este modo:

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

Nota: Esto significa que el acordeón se degrada muy bien cuando JavaScript no está habilitado.

De esta manera usted puede tener su hoja de estilo habitual especificar la clase "HideMe" de esta manera:

.hideme { display: none; } 

Mientras que la hoja de estilos de impresión se puede especificar la clase "HideMe" de esta manera:

div.hideme { display: block; } 

A continuación, en la función 'clic' que agrega a cada H3, después de deslizar hacia arriba los DIV, agregue la clase "hideme" y luego elimine el atributo "style" de cada DIV que se deslizó hacia arriba.

El jQuery general para este se parece a esto:

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

nota la necesidad de incluir la devolución de llamada función en la función slideUp de manera que los cambios de estilo y de clase se producen después de que el DIV se ha deslizado hacia arriba y jQuery ha añadido "style = display: none;"

Answer 3

yo personalmente haría esto de una manera diferente. En lugar de que JQuery agregue el estilo en línea, ¿por qué no hacerlo para agregar una clase?

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

A continuación, puede tener dos hojas de estilo: uno para la pantalla, uno para la impresión:

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

En su screen.css que le define cerrado ...

div.closed { display: none; } 

Pero en tu print.css no lo harías (o dejarías fuera de la pantalla: ninguno). De esta forma, cuando se trata de imprimir, todos los divs se expandirán, pero en la pantalla, se cerrarán.

Answer 4

{display: block! Important; } funciona en FF, pero leí en alguna parte que no funcionaría con ie6. ¿No hay eventos de javascript para imprimir? Recuerdo que busqué mucho antes y no pude encontrar uno, parece una locura que esto no exista, js parece saber cuándo ocurre algo más dentro del navegador, pero está ciego a la impresión por alguna razón :(

Brent @ mimoYmima.com

Answer 5

Haciendo 'pantalla como bloque de' todos los elementos dentro del acordeón cubrirán todos los divs dentro

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