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

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

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

Answer 3

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

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

可以打印Jquery“slideup”功能隐藏的列表项

3 个答案: