如何控制特定屏幕大小的折叠功能

Question

我目前正在建立一个响应网站，我正在使用可折叠面板的内容。由于内容数量庞大，我只想在智能手机上使用可折叠的功能。

所以我有两种情况：

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

基本上，我希望折叠函数只在scenario 1上工作，在那里所有面板都是默认的。在scenario 2中，所有面板都应该是打开的，折叠函数应该被禁用。

由于我使用的是引导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;
  }
}

如doc：http://getbootstrap.com/javascript/#collapse中所述，崩溃插件使用三个类来定义折叠元素的不同状态：.collapse (display设置为none)、.collapse.in (display设置为块)和.collapsing (当元素正在转换时)。上面的媒体查询利用了这些优点，并将折叠状态设置为显示块。但是，您还需要覆盖在运行javascript时应用的内联高度样式，因此在折叠状态和折叠状态中使用高度:auto！都会导致内联样式被忽略，以支持！重要规则。

编辑

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