1

以下を使用して、いくつかの展開/折りたたみ div を実行しています

<div class="FAQ">
    <a href="#hide1" class="hide" id="hide1">+</a>
    <a href="#show1" class="show" id="show1">-</a>
    <div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div>
        <div class="list">
            <p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p>
        </div>
</div>

CSS

/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */

.FAQ { 
    vertical-align: top; 
    height:auto !important; 
}
.list {
    display:none; 
    height:auto;
    margin:0;
    float: left;
}
.show {
    display: none; 
}
.hide:target + .show {
    display: inline; 
}
.hide:target {
    display: none; 
}
.hide:target ~ .list {
    display:inline; 
}

ここで見つかった (および続き)純粋な CSS の折りたたみ/展開 div

私の問題は、Ctrl + pまたは関数printpageスクリプトを使用して、展開されたdivを印刷できないことです。

私はこの種のことは初めてで、答えは私を見つめているに違いないと感じています。print.css ファイルに追加して、少なくともクラス FAQ の機能を無視し、展開された div だけを印刷できない場合に非表示になっているものをすべて印刷するように強制できるものはありますか?

前もって感謝します。

4

2 に答える 2

2

展開/折りたたみの機能を無視する最善の方法は、print.css のスタイリングを通じて回答 div を展開することです。

    .list {
        display: inline;
    }
于 2013-10-30T16:07:08.193 に答える
1

上記の行をprint.cssに追加しました:

.list {
    display: inline;
}

また、次のことも行いました。

<div id="div0" class="collapse changethis">                                
<div class="panel-body" float="right" id="print_content">
<table class="table details" style="margin-left: -390px;margin-top:20px;" id="485">                                
<tbody>
<tr><th>Product name</th>                                
<th>HSN Code</th>                              
<th>Amount</th>                                
</tr>
<tr><td>Backlight Flex</td>
<td> 212223</td>
<td>5000</td>
</tr>
<tr><td>Flex Printing</td>
<td>39219090</td>
<td>900</td>
</tr>                                
</tbody>
</table>                                
</div>                                 
</div>

脚本

    <script>
    function print_page()
    {
         var printContents = document.getElementById("print_content").innerHTML;
         var originalContents = document.body.innerHTML;
         document.body.innerHTML = printContents;
         //expand collapsible divs
         $('div.changethis').addClass('in').css("height", "");
         window.print();
         document.body.innerHTML = originalContents;
         window.location.href = "<?php echo site_url('clients/search'); ?>";   
    }
</script>

PS-上記のコードは、私の作業モジュールのほんの一部です。読みやすく理解しやすいように、一部の部分のみを示しています。

以下の行：

//expand collapsible divs $('div.changethis').addClass('in').css("height", "");

その魔法を働いた。

私が参照したフィドルへのリンク

于 2018-07-30T07:33:42.643 に答える