Возможно распечатать элементы списка, скрытые функцией JQuery «slideup»

Question

Я пытаюсь расширить этот аккордеон при печати. код ухудшается изящно, когда javascript отключен, но при печати он просто не расширяется.

вот демо его, так что вы можете увидеть, как это работает: http://evanmoore.webs.com/test.htm

спасибо вам за вашу помощь!

ниже код:

<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

Вам нужно добавить !important заставить правило CSS, чтобы переопределить style свойства, как это: (непроверенный)

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

Answer 2

Если вы пытаетесь получить аккордеон расширить для печати, почему вы установить его в display:none; если носитель print? (как SLaks, display: hide; ничего не делает.)

Мне кажется, что вы должны фактически настраивать отображение на «inline» или «block» в зависимости от его использования через остальную часть страницы. Элемент списка по умолчанию имеет значение «inline», поэтому, если вы не внесли изменений в свой CSS, я бы установил его.

Answer 3

это работало для меня (поместить в конце файла CSS, где стили экрана являются)

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