Question

我有一个可以包含大量子元素的元素列表。为了清楚地排列布局，element-long默认是不可见的。当用户点击Show more条目时，element-short和element-long的可见性将通过JavaScript（.children('.element-short, .element-long').toggle()）进行处理。

<div class="element-short" style="display: none;">
  <p>Heading</p>
  <ul> [truncated sub-element list] </ul>
  <div>Show more</div>
</div>
<div class="element-long" style="display: block;">
  <p>Heading</p>
  <ul> [full sub-element list] </ul>
</div>

现在的问题是，这会改变屏幕和打印的可见性。但是，对于打印，我希望打印所有element-long部分，并且element-short部分始终隐藏，如果用户之前点击了更多按钮，则会独立隐藏。

Bootstrap有很多visible-*-block个类，但是这些类只针对特殊的显示大小，而不是Web浏览器中的一般可见性。

如何仅在网络浏览器中通过JavaScript显示/隐藏某个部分，但在打印时始终可见或隐藏？

Answer 1

这似乎可以解决问题：

<强> CSS：

@media print {
  .element-short {
    display: none !important
  }
  .element-long {
    display: block !important
  }
}

Answer 2

也许你可以使用媒体查询

@media print {
  .show-me-when-print {
    visibility: visible;
    display: block;
  }
}

@media screen {
  .hide-me-in-screen {
    display: none;
  }
}

并将这些课程添加到您的项目

<div class="item hide-me-in-screen show-me-when-print">
    show me when print
</div>

https://jsfiddle.net/3zqetL69/

Bootstrap：切换浏览器元素的可见性，而不是打印？

2 个答案: