Tự động đóng bảng điều khiển accordion Bootstrap khi chuyển sang kích thước màn hình di động

Question

Sử dụng Bootstrap 2.3.2 Tôi có một accordion với một bảng duy nhất mở khi trang được tải.

  <div class="accordion" id="refine"> 
       <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"> 
        Title 
       </a> 
       </div> 
       <div id="refine-search" class="accordion-body collapse in"> 
       <div class="accordion-inner"> 
        Test text.... 
       </div> 
       </div> 
      </div>      

Trang web đáp ứng đầy đủ. Khi chuyển sang kích thước màn hình di động [@media (max-width: 979px)] Tôi muốn bảng điều khiển accordion tự động đóng, tức là tôi muốn dòng tinh chỉnh tìm kiếm div thay đổi thành "thu gọn".

Khi ở chế độ di động, accordion vẫn phải hoạt động, ví dụ: người dùng có thể nhấp vào tiêu đề accordion và bảng điều khiển sẽ mở rộng do đó tôi không muốn divs trùng lặp để tắt bảng điều khiển bằng cách sử dụng các lớp tiện ích .hidden-desktop, v.v.

Tôi đã tìm kiếm câu trả lời cao và thấp có ai giúp không?

Answer 1

Vì vậy, cuối cùng tôi đã tìm ra cách để làm điều này, đăng nó trong trường hợp đó là sự giúp đỡ cho bất cứ ai.

Alter HTML để:

<div class="accordion" id="refine"> 

    <div class="hidden-phone"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"> 
       <legend> 
        <h2>Refine your search</h2></legend> 
      </a> 
     </div> 
    </div> 

    <div class="visible-phone"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"> 
       <legend> 
        <h2>Refine your search (press to reveal)</h2></legend> 
      </a> 
     </div> 
    </div> 

    <div id="refine-search" class="accordion-body collapse in"> 

     <div class="accordion-inner"> 

      Test text.... 
     </div> 

    </div> 

</div> 

Và sau đó sử dụng này JS trong file.

$(window).bind('resize load', function() { 
    if ($(this).width() < 767) { 
     $('#refine-search').removeClass('in'); 
     $('#refine-search').addClass('out'); 
    } else { 
     $('#refine-search').removeClass('out'); 
     $('#refine-search').addClass('in'); 
    } 
}); 

Answer 2

Đối với Bootstrap 3.x này làm việc tuyệt vời với không thay đổi mã ví dụ của họ:

$(window).bind('resize load', function() { 
    if ($(this).width() < 767) { 
     $('.collapse').removeClass('in'); 
     $('.collapse').addClass('out'); 
    } else { 
     $('.collapse').removeClass('out'); 
     $('.collapse').addClass('in'); 
    } 
}); 

Answer 3

Đối với bất cứ ai đi qua chủ đề này: Tính đến 2/17/17, khi tôi đi qua chủ đề này, cả hai bảng accordion được hiển thị trên Desktop và Mobile. Các lớp "điện thoại ẩn" và "điện thoại có thể nhìn thấy" không hiển thị/ẩn tùy thuộc vào kích thước khung nhìn. Tôi đã thêm "hidden-xs" và "visible-xs" vào các div tương ứng bao bọc các tiêu đề accordion và tôi tin rằng nó hiện đang hoạt động như nó đã được dự định cách đây 3 năm.

Khi rtpHarry giải thích, bạn không cần thêm và xóa lớp "out", vì vậy tôi đã xóa nó. Ngoài ra tôi không thực hiện bất kỳ chỉnh sửa bổ sung nào.

$(window).bind('resize load', function() { 
 
    if ($(this).width() <= 767) { 
 
    $('#refine-search').removeClass('in'); 
 
    } else { 
 
    $('#refine-search').addClass('in'); 
 
    } 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="accordion" id="refine"> 
 
    <div class="hidden-phone hidden-xs"> 
 
    <div class="accordion-heading"> 
 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"> 
 
     <legend> 
 
      <h2>Desktop: Refine your search</h2> 
 
     </legend> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
    <div class="visible-phone visible-xs"> 
 
    <div class="accordion-heading"> 
 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"> 
 
     <legend> 
 
      <h2>Mobile: Refine your search (press to reveal)</h2> 
 
     </legend> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
    <div id="refine-search" class="accordion-body collapse in"> 
 
    <div class="accordion-inner"> 
 
     Test text.... 
 
    </div> 
 
    </div> 
 
</div>

dụ của tôi: http://www.bootply.com/ZAahtL5zGp