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

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（display设置为none）,. collapse.in（显示设置）阻止）和.collapsing（当元素转换时）。上面的媒体查询利用了这些并将崩溃状态设置为显示块。但是，您还需要覆盖运行javascript时应用的内联高度样式，因此在折叠和折叠状态下使用height：auto！important会导致内联样式被忽略，以支持！important规则。

修改

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