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

Posted 2023-05-08

【中文标题】是否可以打印被 jQuery 的“slideUp”功能隐藏的 DIV

【英文标题】：Is it possible to print a DIV that is hidden by jQuery's "slideUp" function

【发布时间】：2010-09-16 04:59:46

【问题描述】：

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

“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 声明有效时就过分了。

【参考方案1】：

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

因此，如果您设置了打印媒体样式表 - 您可以执行类似的操作

div.accordian  display:block !important; 

【讨论】：

哦，我不知道 !important 在所有浏览器上都可以覆盖内联样式。非常感谢！

【参考方案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 时都会展开，但在屏幕上，它们会被关闭。

【讨论】：

因为我想使用默认添加“style=display:none;”的幻灯片动画否则，谢谢。

【参考方案3】：

将手风琴内的所有元素“显示为块”将覆盖里面的所有div。

#accordion > * display:block !important;

【参考方案4】：

是的。

在加载时向所有相关的 DIV 添加一个类（例如“hideme”），如下所示：

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

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

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

.hideme  display: none; 

虽然您的打印样式表可以像这样指定“hideme”类：

div.hideme  display: block; 

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

整个 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;”之后发生样式和类的变化

【讨论】：

嗯，这个解决方案并不完全有效，因为“display:none;”不会从仍然向上滑动的 DIV 中删除，直到下一张幻灯片。

如果您要回答自己的问题，至少可以先调试一下 :-)。

是的，我现在修好了 :-) 我调试过，只是很糟糕 :-)。我只是想在这里作为参考。

我认为 Sugendran 的回答更有用更简洁。拥有特殊的类和 javascript 方法很笨重。

是的，我不知道 !important 出于某种原因 - 我想我认为它是由浏览器不一致地实现的

【参考方案5】：

显示：阻止！重要；在 FF 中工作，但我在某处读到它不适用于 ie6。是否没有用于打印的 javascript 事件？我记得之前找了很多，但找不到，这似乎很疯狂，js似乎知道浏览器内何时发生其他任何事情，但由于某种原因无法打印:(

布伦特 @ mimoYmima.com