css - 使用折叠插件在屏幕尺寸发生变化时使 div 可折叠 - Bootstrap

Question

我有这个代码:

<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(我用得更少)并且屏幕变小时，折叠插件不再起作用。我能做些什么？。谢谢。

Answer 1

如果你使用折叠插件，你不能用 less 来做，因为这个插件通过在 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);