Question

我正在尝试使用单独的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完成的。

Answer 1

CSS无法处理CLICK事件。你需要JavaScript才能做到这一点。

Answer 2

我遇到了同样的问题，我找到了解决方案，为每个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 个答案: