如何控制特定屏幕尺寸的折叠功能

Question

我目前正在构建一个响应式网站，我在其中使用可折叠面板的内容。由于内容量大，我只希望在智能手机上使用可折叠功能。

所以我有两种情况：

1. 屏幕空间最小的平板电脑和智能手机
2. 具有足够屏幕空间的桌面屏幕

基本上我希望折叠功能仅在scenario 1 上工作，其中所有面板默认都未折叠。在scenario 2 中，所有面板都应该只是打开，并且应该禁用折叠功能。

由于我使用的是 Bootstrap collapse.js，有没有很好的方法来处理这个任务？

Answer 1

媒体查询可用于防止面板在更大的视口上折叠。

CSS：

@media (min-width: 992px) { /*or 1200px if you just want it to affect the lg devices*/
  .collapsing {
    height: auto !important;
  }
  .collapse {
    height: auto !important;
    display: block;
  }
}

如文档中所述：http://getbootstrap.com/javascript/#collapse，折叠插件使用三个类来定义折叠元素的不同状态：.collapse（显示设置为无），.collapse.in（显示设置为阻止) 和 .collapsing (当元素过渡时)。上面的媒体查询利用了这些并将折叠状态设置为显示块。但是，您还需要覆盖在运行 javascript 时应用的内联高度样式，因此在折叠和折叠状态下使用 height: auto !important 会导致内联样式被忽略以支持 !important 规则。

编辑

请参阅下面的 cmets。如果您发现内容没有按预期显示，请尝试将visibility: visible; 添加到上述媒体查询中的.collapse 规则中。