显示所有类元素，即使是那些在屏幕上不可见的元素答案

【问题标题】：Display all class elements even those that are not visible on screen显示所有类元素，即使是那些在屏幕上不可见的元素
【发布时间】：2012-12-13 17:58:43
【问题描述】：

我正在尝试使用单独的 CSS 文件从我的页面打印出详细信息。我遇到的问题是显示我想要显示的所有内容。我的网页上有一个手风琴，用于不同的详细信息，我希望它显示 3 个手风琴框中的所有相关详细信息，但它仅打印当前打开框中的数据。我希望打印时所有部分中的“约会数据”类中的数据都可见。

<div id="accordion">

    <div>
         <h3><a href="#">Section 1</a></h3>
        <div>
            <div class="appointment-image">
                <img alt="img1" src="../../Content/images/img1.jpg" />
            </div>

            <div class="appointment-data">
                <div class="display-box">
                    <div class="display-label">@Html.LabelFor(model => model.Item1)</div>
                    <div class="display-field">@Html.DisplayFor(model => model.Item1)</div>
                </div>
                <div class="display-box">
                    <div class="display-label">@Html.LabelFor(model => model.Item2)</div>
                    <div class="display-field">@Html.DisplayFor(model => model.Item2)</div>
                </div>

            </div>
        </div>
    </div>
         <h3><a href="#">Section 2</a></h3>
        <div>
            <div class="appointment-image">
                <img alt="" src="../../Content/images/img2.jpg" />
            </div>

            <div class="appointment-data">
                <div class="display-box">
                    <div class="display-label">@Html.LabelFor(model => model.Item3)</div>
                    <div class="display-field">@Html.DisplayFor(model => model.Item3)</div>
                </div>                                    
            </div>
        </div>
    </div>
    <div>
         <h3><a href="#">Section 3</a></h3>
        <div class="appointment-image">
            <img alt="" src="../../Content/images/img3.jpg" />
        </div>

        <div class="appointment-data">
            <div class="display-box">
                <div class="display-label">@Html.LabelFor(model => model.Item4)</div>
                <div class="display-field">@Html.DisplayFor(model => model.Item4)</div>
            </div>                                    
        </div>
    </div>

</div>

因为它是一个手风琴，一次只能看到一个部分，我宁愿使用 CSS 和 HTML 而不是 jQuery/JavaScript。手风琴是使用 jQuery 完成的。

【问题讨论】：

标签： jquery css html printing

【解决方案1】：

我遇到了同样的问题，我找到了解决方案，为您的每个 div 提供“id”，让我们分别假设“divAccordion1, divAccordion2, divAccordion3”。以下适用于我的情况，它将打开所有三个手风琴并打印内容。

<style type="text/css">
@media print{
#divAccordion1 {display: block !important;}
#divAccordion2 {display: block !important;}
#divAccordion3 {display: block !important;}
}
</style>

【讨论】：

【解决方案2】：

CSS 无法处理 CLICK 事件。您需要 JavaScript 来执行此操作。

【讨论】：