0

我试图让这个手风琴在打印时展开。关闭 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>
4

3 回答 3

2

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

<style type="text/css">
@media print {
    .accordionContainer ul li {
        display: block !important;
    }
}
</style>
于 2009-12-11T03:12:01.967 回答
0

如果您想让 Accordion 扩展打印，为什么要将它设置为display:none;if media is print？（作为 SLaks，display: hide;什么都不做。）

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

于 2009-12-11T01:52:14.250 回答
0

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

.ui-accordion-content {
    display: block !important;
}
于 2014-01-28T22:16:16.523 回答