Possibilité d'imprimer les éléments de liste cachés par Jquery « slideUp fonction »

Question

Je suis en train d'obtenir ce accordéon pour développer l'impression. le code se dégrade avec élégance lorsque javascript est désactivé, mais il ne fonctionne tout simplement pas développer lors de l'impression.

voici une démo de celui-ci afin que vous puissiez voir comment cela fonctionne: http: //evanmoore.webs. com / test.htm

je vous remercie beaucoup pour votre aide!

Voici le code:

<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

Vous devez ajouter !important pour forcer la règle CSS pour remplacer la propriété style, comme celui-ci: (non testé)

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

Answer 2

Si vous essayez d'obtenir l'accordéon à développer pour l'impression, pourquoi vous mettez à display:none; si les médias est print? (Comme SLaks, display: hide; ne fait rien.)

Il me semble que vous devriez effectivement être l'affichage du réglage à « en ligne » ou « bloc » en fonction de son utilisation par le reste de la page. A défaut list-item à « en ligne », donc si vous ne l'avez pas fait un changement dans votre CSS, je avais mis à cela.

Answer 3

cela a fonctionné pour moi (mis à la fin du fichier CSS où les styles d'écran sont)

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