Câu hỏi Accordions sụp đổ theo mặc định trong thiết bị di động và được mở rộng theo mặc định trong Bootstrap 3 máy tính để bàn đáp ứng


Tôi đang tạo ra vài accordions bằng cách sử dụng bootstrap 3. Yêu cầu của tôi là tất cả accordions nên được mở rộng theo mặc định ở độ phân giải 1024 trở lên. khi nhấp vào nó sẽ ẩn

Nhưng trong thiết bị di động, thiết bị này phải ở chế độ thu gọn theo mặc định. khi nhấp vào nó sẽ mở rộng

Đây là mã của tôi:

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

Cảm ơn bạn Monica Mandal


10
2017-09-04 09:08


gốc




Các câu trả lời:


Thử cái này:

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

12
2017-09-04 09:22



Cảm ơn, nó đã hoạt động - Monica Mandal
Nhưng chúng ta cần phải làm mới khi đi đến màn hình lớn hơn hoặc nhỏ. Chúng tôi không thể tự động thu thập / mở khi chúng tôi kéo đến màn hình nhỏ hơn hoặc lớn hơn - Kumar


Trong css của bạn:

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

4
2018-06-23 19:51



hoạt động, nhưng sử dụng accordion này luôn bị sụp đổ trên các thiết bị nhỏ, không chỉ trên tải trang. Vì vậy, người dùng không thể nhìn thấy nội dung trong đó. - Heribert


Câu trả lời của Abdulla gần như làm việc cho tôi, tuy nhiên, tôi đã phải sử dụng collapse () thay vì removeClass ('in')

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

0
2017-12-11 08:58