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; 
}

如发现（并继续）here Pure CSS collapse/expand div

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

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

提前致谢。

4

2 回答 2

2

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

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

I added the above line in print.css:

.list {
    display: inline;
}

and also did the following:

<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

    <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- above mentioned code is only a small part of my working module, i have shown only some parts for easy readability and understandability.

The line below:

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

worked its magic.

Link to the fiddle that i referred

于 2018-07-30T07:33:42.643 回答