默認情況下，手機在手機中摺疊並在桌面上默認擴展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響應

回答

相關問題