1

別のCSSファイルを使用して、ページから詳細を印刷しようとしています。私が抱えている問題は、表示したいものすべてを表示することです。私のWebページにはさまざまな詳細のアコーディオンがあり、3つのアコーディオンボックスの関連するすべての詳細を表示したいのですが、現在開いているボックスのデータのみを印刷しています。印刷時にすべてのセクションの「appointment-data」クラスのデータを表示したい。 

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

アコーディオンなので、一度に表示できるセクションは1つだけで、jQuery/JavaScriptよりもCSSとHTMLを使用したいと思います。アコーディオンはjQueryを使用して行われます。

4

2 に答える 2

0

CSSはCLICKイベントを処理できません。これを行うにはJavaScriptが必要です。

于 2012-12-13T18:00:10.497 に答える
0

私は同じ問題を抱えていましたが、解決策を見つけました。各divに「id」を指定します。それぞれ「divAccordion1、divAccordion2、divAccordion3」と仮定します。私の場合、次のように機能します。3つのアコーディオンをすべて開いて、コンテンツを印刷します。

<style type="text/css">
@media print{
#divAccordion1 {display: block !important;}
#divAccordion2 {display: block !important;}
#divAccordion3 {display: block !important;}
}
</style>
于 2012-12-28T03:15:21.660 に答える