Posible imprimir elementos de la lista ocultos por jQuery función “slideUp”

Question

Estoy tratando de conseguir este acordeón para ampliar cuando se imprima. el código se degrada con gracia cuando Javascript está apagado, pero simplemente no se expande cuando se imprime.

he aquí una demostración de ella para que pueda ver cómo funciona: http: //evanmoore.webs. com / test.htm

Muchas gracias por su ayuda!

a continuación se muestra el código:

<style type="text/css">
@media print {
    .accordionContainer ul li {
        display: block;
    }
}
</style>

<script src="http://visualjquery.com/jquery-1.2.6.js" type="text/javascript"></script>

<script type="text/javascript">
//<!--
$(document).ready(function() {
var intDefaultOpenIndex = 0;
$(".accordion li h2").next().slideUp(100);
$(".accordion li").eq(intDefaultOpenIndex).addClass("expanded").children("h2").next().slideDown(100);
$(".accordion li h2").click(function() {
if ($(this).parent().hasClass('expanded'))  {
$(this).parent().removeClass('expanded').find("ul").slideUp(100);
$(this).parent().removeClass('expanded').find("p").slideUp(100);
} else {

$(".accordion .expanded ul").slideUp(100).parent().removeClass('expanded');
$(this).parent().addClass('expanded').find("ul").slideDown(100);
$(".accordion .expanded p").slideUp(100).parent().removeClass('expanded');
$(this).parent().addClass('expanded').find("p").slideDown(100);
$(".accordion .expanded form").slideUp(100).parent().removeClass('expanded');
}

});
});

//-->
</script>

<div class="accordionContainer">

<ul class="accordion">

 <li><h2>Title 1</h2>
  <ul>
   <li>Content 1</li>
   <li>Content 2</li>
   <li>Content 3</li>   
  </ul>
 </li>

 <li><h2>Related Programs</h2>
  <p>content 1</p>
 </li>
 <li><h2>Why APU</h2>
  <p>content 3</p>
 </li>
 <li><h2>About the University</h2>
  <p>content 4</p>
 </li>
</ul>

</div>

Answer 1

Es necesario añadir !important para forzar la regla CSS para reemplazar la propiedad style, así: (no probado)

<style type="text/css">
@media print {
    .accordionContainer ul li {
        display: block !important;
    }
}
</style>

Answer 2

Si usted está tratando de obtener el acordeón se expanda para la impresión, ¿por qué lo establece a display:none; si el medio está print? (Como SLaks, display: hide; no hace nada.)

Me parece que en realidad se debe a configurar la pantalla a 'en línea' o 'bloque' dependiendo de su uso por el resto de la página. A-elemento de la lista por defecto es 'inline' por lo que si usted no ha hecho un cambio en su CSS, entonces me configurarlo para que.

Answer 3

Esto funcionó para mí (puesto al final del archivo CSS donde los estilos de pantalla son)

.ui-accordion-content {
    display: block !important;
}