默认情况下，手机在手机中折叠并在桌面上默认扩展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/

谢谢莫妮卡曼达尔

来源

2014-09-04 Monica Mandal

试试这个：

$(document).ready(function(){ 
    var windowWidth = $(window).width(); 
    if(windowWidth <= 1024) //for iPad & smaller devices 
    $('.panel-collapse').removeClass('in') 
});

来源

2014-09-04 09:22:45

谢谢，它的工作 – 2014-09-05 05:56:35

但我们需要刷新的时候去大或小屏幕。当我们拖动到更小或更大的屏幕 – Kumar 2016-01-18 04:06:47

在你的CSS：

@media (max-width: 768px) 
{ 
    .collapse.in { 
     display: none; 
    } 
}

来源

2015-06-23 19:51:31 Kumag

工作时，我们不能让自动匹配器/打开，但使用此手风琴始终折叠在小设备上，而不仅仅是在页面加载。因此，用户无法看到那里的内容。 – 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() 
    } 
});

来源

2017-12-11 08:58:35 Heribert

默认情况下，手机在手机中折叠并在桌面上默认扩展Bootstrap 3响应

回答

相关问题