Question

我有一个简单的“手风琴”类型页面，其中包含H3标题和DIV内容框的列表（每个H3后跟一个DIV）。在这个页面上，我从隐藏的所有DIV开始。单击H3时，使用jQuery的"slideDown"函数显示正下方（之后）的DIV，而使用"slideUp"函数隐藏所有其他DIV。

“slideUp”函数将以下内联样式插入到指定的DIV中：

style="display: none;"

我想知道是否有任何方法可以让我在用户打印页面时展示所有展开的DIV（就像用户禁用JavaScript时那样）。

我认为这是不可能的，因为内联样式总是优先于任何其他样式声明。

还有其他解决方案吗？

解决方案

Sugendran's solution很棒，适用于我迄今为止测试过的浏览器（FF2，IE7和IE6）。我不知道有什么方法可以覆盖内联样式，我很确定这是我以前查过的内容所以我很高兴找到它。我也看到有this answer here这个问题。我希望在这里搜索并不困难： - ）。

Lee Theobald's solution会很棒，但“slideUp”函数会添加style =“display：none;”位。

My solution工作正常，但是当！important声明有效时，它是过度的。

Answer 1

您可以在CSS中使用！important子句。这将覆盖内联样式。

因此，如果您设置了打印介质样式表 - 您可以执行类似

的操作

div.accordian { display:block !important; }

Answer 2

我个人会以不同的方式做到这一点。而不是添加内联样式的JQuery，为什么不让它添加一个类呢？

<div class="closed">...</div>

然后你可以有两个样式表：一个用于屏幕，一个用于打印：

<link href="screen.css" rel="stylesheet" type="text/css" media="screen,projection"/>
<link href="print.css" rel="stylesheet" type="text/css" media="print"/>

在你的screen.css中你定义了封闭的......

div.closed { display: none; }

但是在你的print.css中你不会（或者你忽略了显示：无）。这种方式，当涉及到打印所有div将被扩展，但在屏幕上，它们将被关闭。

Answer 3

使'显示为块'手风琴中的所有元素将覆盖内部的所有div。

#accordion > *{ display:block !important; }

Answer 4

是

在加载时，将类（例如“hideme”）添加到所有相关的DIV中，如下所示：

$('div#accordion> div').addClass('hideme');

注意：这意味着当禁用JavaScript时，手风琴会降级。

通过这种方式，您可以让常规样式表指定“hideme”类，如下所示：

.hideme { display: none; }

虽然您的打印样式表可以指定“hideme”类，如下所示：

div.hideme { display: block; }

接下来，在“click”功能中添加到每个H3，在向上滑动DIV后，添加“hideme”类，然后从每个DIV中删除“style”属性。

这个整体jQuery看起来像这样：

<script type="text/javascript">
 //<![CDATA[
    $(function() {
        $('#accordion> div').addClass('hideme');

        $('#accordion> h3').click(function() {
          $(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast', function(){ $('#accordion> div:hidden').addClass('hideme').removeAttr('style'); });

      });
    });
 //]]>
</script>

请注意需要在slideUp函数中包含函数回调，以便在DIV滑动并且jQuery添加了“style = display：none;”

之后发生样式和类更改

Answer 5

{display：block！important;在FF工作，但我读到某处，它不适用于ie6。是否没有用于打印的javascript事件？我记得以前广泛寻找一个并且找不到一个，看起来很疯狂，这不存在，js似乎知道什么时候在浏览器内发生了什么，但由于某种原因盲目打印:(

布伦特 @ mimoYmima.com

是否可以打印由jQuery的“slideUp”功能隐藏的DIV

5 个答案: