可以打印由 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

如果您尝试让 Accordion 展开以进行打印，那么如果媒体是 print，为什么要将其设置为 display:none; 呢？ （作为 SLaks，display: hide; 不执行任何操作。）

在我看来，您实际上应该将 display 设置为“内联”或“块”，具体取决于页面其余部分的使用情况。列表项默认为“内联”，因此如果您没有对 CSS 进行更改，那么我会将其设置为“内联”。

Answer 2

这对我有用（放在 CSS 文件的末尾，屏幕样式所在的位置）

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

Answer 3

您需要添加 !important 来强制 CSS 规则覆盖 style 属性，如下所示：（未经测试）

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