默认情况下,手机在手机中折叠并在桌面上默认扩展Bootstrap 3响应
问题描述:
我使用引导程序3创建了几个手风琴3.我的要求是所有手风琴都应在1024和更高分辨率下进行默认扩展。点击它应该隐藏默认情况下,手机在手机中折叠并在桌面上默认扩展Bootstrap 3响应
但是在移动设备中,默认情况下它应该处于折叠模式。在点击它应该扩大
这里是我的代码:
<div class="panel-group" id="accordion">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- Asia Starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseSix">
Asia
</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse in">
<!-- panel content starts-->
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">China</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">India</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Thailand</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Singapore</a>
</div>
</div>
</div>
<!-- panel content ends-->
</div>
</div>
<!-- Asia ends-->
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- europe starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Europe
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse in">
<!-- panel content starts-->
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Germany</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">The Netherlands</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Denmark</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Italy</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">France</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Belgium</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Sweden</a>
</div>
</div>
</div>
<!-- panel content ends-->
</div>
</div>
<!-- europe ends-->
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 verticalBelowSpacing10px">
<!-- middle east north africa starts-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Middle East and North Africa
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<!-- flags-->
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">UAE</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Israel</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Saudi Arabia</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 verticalBelowSpacing10px"><a href="#">Egypt</a>
</div>
</div>
</div>
<!-- flags-->
</div>
</div>
<!-- middle east north africa ends-->
</div>
</div>
<!-- 1st row ends-->
</div>
http://jsfiddle.net/monicaRegal/q5rLx1dn/1/embedded/result/
谢谢 莫妮卡曼达尔
答
试试这个:
$(document).ready(function(){
var windowWidth = $(window).width();
if(windowWidth <= 1024) //for iPad & smaller devices
$('.panel-collapse').removeClass('in')
});
答
在你的CSS:
@media (max-width: 768px)
{
.collapse.in {
display: none;
}
}
+0
工作时,我们不能让自动匹配器/打开,但使用此手风琴始终折叠在小设备上,而不仅仅是在页面加载。因此,用户无法看到那里的内容。 – Heribert 2017-12-11 08:57:07
答
阿卜杜拉的回答几乎)为我工作,但我不得不使用崩溃(而不是removeClass(“IN”)
jQuery(document).ready(function(){
var windowWidth = jQuery(window).width();
if(windowWidth <= 1024) { //for iPad & smaller devices
jQuery('.panel-collapse').collapse()
}
});
谢谢,它的工作 – 2014-09-05 05:56:35
但我们需要刷新的时候去大或小屏幕。当我们拖动到更小或更大的屏幕 – Kumar 2016-01-18 04:06:47