Question

我在常见问题解答页面中使用了从display到none的简单切换CSS 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>

当我进入打印模式时，我该怎么做以确保打开所有内容？

Answer 1

不是直接使用JS代码操作元素的显示状态，而是使用CSS定义类，然后使用JS切换类。

如果您的课程仅为@media屏幕定义，那么您不必担心任何常见问题条目的当前显示状态。

编辑：例如，在您的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，因为你没有在你的代码示例中使用它。

如何判断页面是否在打印视图中？

1 个答案: