twitter-bootstrap 仅在移动视图上折叠 DIV - Bootstrap 3
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28086811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Collapse DIV only on Mobile View - Bootstrap 3
提问by Naveed Javaid
I have a sidebar search parameters. I want to make collapse function on this DIV only on Mobile device. Using Bootstrap 3 - Latest version.
我有一个侧边栏搜索参数。我只想在移动设备上对这个 DIV 进行折叠功能。使用 Bootstrap 3 - 最新版本。
Here is the HTML Markup.
这是 HTML 标记。
<div class="col-md-3 col-sm-4 SearchParameters">
<h4 data-toggle="collapse" data-target="#search">Location</h4>
<div class="col-md-12 sCheck no-gutter collapse" id="search">
<h5>Lahore (254)</h5>
<div class="col-md-12">
<form role="form">
<div class="checkbox checkbox-primary">
<input type="checkbox" id="ModelTown">
<label for="ModelTown">Model Town</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="DHA">
<label for="DHA">DHA</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="CG">
<label for="CG">Cavalry Ground</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="Gulberg">
<label for="Gulberg">Gulberg</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="Samnabad">
<label for="Samnabad">Samnabad</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="AIT">
<label for="AIT">Allama Iqbal Town</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="GardenTown">
<label for="GardenTown">Garden Town</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="Township">
<label for="Township">Township</label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" id="FaisalTown">
<label for="FaisalTown">Faisal Town</label>
</div>
<a href="#">20 more locations</a>
</form>
</div><!-- form-group -->
<div class="clearfix"></div>
<h5 class="second">Availability</h5>
<div class="col-md-12 SelectDays">
<a href="#" class="Day">M</a>
<a href="#" class="Day">T</a>
<a href="#" class="Day active">W</a>
<a href="#" class="Day">Th</a>
<a href="#" class="Day">F</a>
<a href="#" class="Day">S</a>
<a href="#" class="Day">SU</a>
</div><!-- SelectDays -->
<div class="col-md-12 TimeSet">
<!-- timeFunction -->
</div><!-- TimeSet -->
</div><!-- col-md-12 -->
</div><!-- SearchParameters -->
The SearchParameters DIV I use to give styling to the code.
我用来为代码提供样式的 SearchParameters DIV。
Note : I want to collapse "SearchParameters" div only on mobile and opened it with a button.. There should be only 1 div. I can hide this div and show another div which is visible on mobile devices but that's not a good approach. I want to collapse this div and show it on button click only on mobile devices.
注意：我只想在移动设备上折叠“SearchParameters”div 并用按钮打开它。应该只有 1 个 div。我可以隐藏这个 div 并显示另一个在移动设备上可见的 div 但这不是一个好方法。我想折叠这个 div 并仅在移动设备上单击按钮时显示它。
回答by Rudi
You could do it this way:
你可以这样做：
<button class="visible-xs" data-toggle="collapse" data-target="#SearchParameters">Toggle it</button>
<div class="hidden-xs col-md-3 col-sm-4 SearchParameters" id="SearchParameters">
...
CSS:
CSS：
#SearchParameters.in,
#SearchParameters.collapsing {
display: block!important;
}
回答by Andrew Dinmore
Since the "in" class is what defines the collapsible element as open, removing it on mobile causes it to start out collapsed.
由于“in”类将可折叠元素定义为打开状态，因此在移动设备上删除它会导致它开始折叠。
E.g.
例如
<button data-toggle="collapse" data-target="#collapsible">Show/Hide</button>
<div class="collapse in" id="collapsible">
Content Here.
</div>
<div class="visible-xs" id="xs-check"></div>
<script>
if( $("#xs-check").is(":visible") )
$("#collapsible").removeClass("in");
</script>
回答by igor
CSS-only method. Also works on Bootstrap 4.
纯 CSS 方法。也适用于 Bootstrap 4。
@media (min-width: 768px) {
.collapse.dont-collapse-sm {
display: block;
height: auto !important;
visibility: visible;
}
}<div class="container">
<button class="btn btn-primary hidden visible-xs" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Collapse Button
</button>
<div class="collapse dont-collapse-sm" id="collapseExample">
<div class="well">
Collapse Panel
</div>
</div>
</div>回答by juFo
Why not using the window.matchMedia?
为什么不使用 window.matchMedia？
For simplicity I've created an example based on Andrew Dinmore. It doesn't need the extra empty divto check whether something is visible or not.
为简单起见，我创建了一个基于 Andrew Dinmore 的示例。它不需要额外的空 div来检查某些东西是否可见。
<button class="btn btn-default btn-block visible-xs hidden-sm hidden-md hidden-lg" data-toggle="collapse" data-target="#Foo">Toggle</button>
<div id="Foo" class="collapse in">
<!-- fancy content here -->
</div>
<script type="text/javascript">
$(document).ready(function () {
if (matchMedia) {
var mq = window.matchMedia("(max-width: 768px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
function WidthChange(mq) {
if (mq.matches) {
$("#Foo").removeClass("in");
}
}
});
</script>
enjoy! ;-)
请享用！;-)
