打印折叠的 CSS div答案

【问题标题】：Printing collapsed css divs打印折叠的 CSS div
【发布时间】：2018-07-30 15:33:42
【问题描述】：

我正在使用以下内容来运行一些展开/折叠的 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; 
}

在这里找到（并继续）Pure CSS collapse/expand div

我的问题是我无法使用 Ctrl+p 或使用函数 printpage 脚本打印展开的 div。

我是这种事情的新手，我觉得答案一定是盯着我的脸。有什么我可以添加到我的 print.css 文件中以强制它至少忽略类常见问题解答的功能并打印所有隐藏的内容，如果我不能让它只打印扩展的 div。

提前致谢。

【问题讨论】：

This Link 可能会帮助你

标签： css

【解决方案1】：

忽略展开/折叠功能的最佳方法是通过 print.css 中的样式展开答案 div。

    .list {
        display: inline;
    }

【讨论】：

这很有意义。我不知道为什么它不起作用！！我要睡在上面，早上再发帖（英国时间）

【解决方案2】：

我在 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", "");

发挥了它的魔力。

Link to the fiddle that i referred

【讨论】：