2

FAQ ページでCSSdisplay属性を からnoneに切り替える単純なトグルを使用しています。blockただし、印刷時にページにすべてを表示する必要があります。ページに移動して印刷モードにすると、このコードを print.css スタイルシートに追加したため、閉じられたすべてのアイテムが開きます...

.faq
{
    display:block;
}

ただし、アイテムを開いて再度閉じてから印刷モードにすると、そのアイテムは閉じたままになります。

私のJSコードは次のようになります...

` var divNum = new Array("faq1", "faq2", "faq3", "faq4", "faq5", "faq6", "faq7", "faq8", "faq9", "faq10", "faq11" 、「faq12」、「faq13」);

function openClose(theID) {
    for (var i = 0; i < divNum.length; i++) {
        if (divNum[i] == theID) {
            if (document.getElementById(divNum[i]).style.display == "block") { document.getElementById(divNum[i]).style.display = "none" }
            else { document.getElementById(divNum[i]).style.display = "block" }
        }
    }
}`

HTMLは次のようになります

<a class="faq" onClick="openClose('faq1')">Question?</a><br />
<p id="faq1" class="faq">Answer</p>

印刷モードに入ったときにすべてが開いていることを確認するにはどうすればよいですか?

4

1 に答える 1

2

要素の表示ステータスを JS コードで直接操作する代わりに、CSS でクラスを定義し、JS を使用してクラスを切り替えるだけです。

クラスが @media screen のみに定義されている場合、FAQ エントリの現在の表示ステータスが何であるかを気にする必要はありません。

編集:たとえば、CSS ファイルで:

@media screen .faq.open {
display: block;
}

@media screen .faq {
display: none;
}

次に、JS は次のようになります。

function openClose(theID) {
    for (var i = 0; i < divNum.length; i++) {
        if (divNum[i] == theID) {
            if (document.getElementById(divNum[i]).className.match(new RegExp('(\\s|^)open(\\s|$)'))) { document.getElementById(divNum[i]).className = ele.className.replace(new RegExp('(\\s|^)open(\\s|$)'), ' '); }
            else { document.getElementById(divNum[i]).className += " open" }
        }
    }
}

これはテストしていないため、構文エラーがある可能性があることに注意してください。また、私のプロジェクトのほとんどにはすでに jQuery が含まれているため、通常使用する方法はよりクリーンなコードです。コード サンプルで jQuery を使用していないため、ここでは jQuery を使用していません。

于 2012-08-17T18:56:10.473 に答える