2

我在 FAQ 页面中使用了一个简单的 CSSdisplay属性切换开关。但是，我希望页面在打印时显示所有内容。现在发生的情况是，如果您转到页面并进入打印模式，它将打开所有关闭的项目，因为我将此代码添加到我的 print.css 样式表中......noneblock

.faq
{
    display:block;
}

但是，如果您打开一个项目，再次将其关闭，然后进入打印模式，该项目将保持关闭状态。

我的 JS 代码看起来像这样......

` var divNum = 新数组（“faq1”、“faq2”、“faq3”、“faq4”、“faq5”、“faq6”、“faq7”、“faq8”、“faq9”、“faq10”、“faq11” ，“常见问题12”，“常见问题13”）；

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 屏幕定义，那么您不必担心任何常见问题解答条目的当前显示状态。

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

于 2012-08-17T18:56:10.473 回答