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

アコーディオンを印刷用に拡張しようとしているdisplay:none;場合、メディアがである場合にアコーディオンを設定するのはなぜ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 に答える