Question

我使用bootstrap 3制作的手风琴很少。我的要求是所有的手风琴都应该在1024分辨率及以上的分辨率下进行扩展。点击它应隐藏

但在移动设备中，默认情况下它应该处于崩溃模式。点击它应该展开

这是我的代码：

<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/

谢谢莫妮卡曼达尔

Answer 1

试试这个：

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

Answer 2

在你的css中：

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

Answer 3

Abdulla的回答几乎对我有用，但是，我必须使用collapse（）而不是removeClass（'in'）

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

Answer 4

尝试一下。

 function adjustCollapseView(){
    var desktopView = $(document).width();
    if(desktopView >= "1024"){
        $("#accordion a[data-toggle]").attr("data-toggle","");
        $("#accordion .collapse").addClass("in").css("height","auto")
    }else{
        $("#accordion a[data-toggle]").attr("data-toggle","collapse");
        $("#accordion .collapse").removeClass("in").css("height","0")
        $("#accordion .collapse:first").addClass("in").css("height","auto")
    }
}

$(function(){
    adjustCollapseView();
    $(window).on("resize", function(){
        adjustCollapseView();
    });
});

默认情况下，手风琴在手机中会崩溃，默认情况下会在桌面Bootstrap 3响应中展开

4 个答案: