Question

我正在使用以下内容来运行一些扩展/折叠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文件中，以强制它至少忽略类FAQ的功能，并打印所有隐藏的内容，如果我不能让它只打印扩展的div。

提前致谢。

Answer 1

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

    .list {
        display: inline;
    }

Answer 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

打印崩溃的css div

2 个答案: