使用折叠插件更改屏幕尺寸时使 div 可折叠 - Bootstrap答案

【问题标题】：make div collapsible when screen size changes with collapse plugin - Bootstrap使用折叠插件更改屏幕尺寸时使 div 可折叠 - Bootstrap
【发布时间】：2017-03-23 18:04:50
【问题描述】：

我有这个代码：

<input value="+" class="btn btn_continents" type="button" data-toggle="collapse"
                                               data-target="#collapseContinents" aria-expanded="false" aria-controls="collapseContinents" /> 
<div id="collapseContinents" class="collapse in" >
Content...                                                                                   
</div>

它工作正常，如果有人点击按钮，内容会显示和隐藏，但是当我希望在屏幕尺寸较小时默认隐藏可折叠内容时，问题就来了

#collapseContinents{
     //display: block; 
    .show();
    @media screen and (max-width :@screen-xs-max) {  .
        //display:none;        
        .hidden();           
    }

}

当我添加 css（我使用较少）并且屏幕更小时，折叠插件不再起作用。我能做些什么？。谢谢。

【问题讨论】：

这不是有效的 CSS，CSS 的属性和值类似于您在示例 display: block; 中注释掉的属性和值。
我用的少，可以这样。

标签： css twitter-bootstrap less media-queries

【解决方案1】：

如果你使用折叠插件，你不能少用它，因为这个插件通过在javascript中添加一个in类来管理打开/关闭：

// From Boostrap CSS file:
.collapse {
    display: none;
}
.collapse.in {
    display: block;
}

所以你会在小屏幕上的插件和你的 CSS 之间发生冲突。

您可以在 Javascript 中执行此操作：检测屏幕大小并添加/删除 in 类：

// Add "in" class if window width > 1024px, remove it if <= 1024
$('#collapseContinents').toggleClass('in', $(window).width() > 1024);

【讨论】：