我有侧边栏搜索参数。我想只在移动设备上对此DIV进行折叠功能。使用Bootstrap 3 - 最新版本。
这是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 -->
我使用SearchParameters DIV为代码赋予样式。
注意:我想只在移动设备上折叠“SearchParameters”div并用按钮打开它..应该只有1个div。我可以隐藏这个div并显示另一个在移动设备上可见的div,但这不是一个好方法。我想折叠这个div并仅在移动设备上按下按钮显示它。
你可以这样做:
<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:
#SearchParameters.in,
#SearchParameters.collapsing {
display: block!important;
}
由于“in”类将可折叠元素定义为open,因此在移动设备上将其删除会导致折叠元素开始折叠。
EG
<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>
为什么不使用window.matchMedia?
为简单起见,我创建了一个基于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>
请享用! ;-)