Chỉ thu gọn DIV trên Chế độ xem di động - Bootstrap 3

Question

Tôi có thông số tìm kiếm thanh bên. Tôi chỉ muốn thực hiện chức năng thu gọn trên DIV này trên thiết bị di động. Sử dụng Bootstrap 3 - Phiên bản mới nhất.

Đây là Đánh dấu HTML.

<div class="col-md-3 col-sm-4 SearchParameters"> 
      <h4 data-toggle="collapse" data-target="#search">Location</h4> 
      <div class="col-md-12 sCheck no-gutter collapse" id="search"> 
       <h5>Lahore (254)</h5> 
       <div class="col-md-12"> 
        <form role="form"> 
         <div class="checkbox checkbox-primary"> 
          <input type="checkbox" id="ModelTown"> 
          <label for="ModelTown">Model Town</label> 
         </div> 
         <div class="checkbox checkbox-primary"> 
          <input type="checkbox" id="DHA"> 
          <label for="DHA">DHA</label> 
         </div> 
         <div class="checkbox checkbox-primary"> 
          <input type="checkbox" id="CG"> 
          <label for="CG">Cavalry Ground</label> 
         </div> 
         <div class="checkbox checkbox-primary"> 
          <input type="checkbox" id="Gulberg"> 
          <label for="Gulberg">Gulberg</label> 
         </div> 
         <div class="checkbox checkbox-primary"> 
          <input type="checkbox" id="Samnabad"> 
          <label for="Samnabad">Samnabad</label> 
         </div> 
         <div class="checkbox checkbox-primary"> 
          <input type="checkbox" id="AIT"> 
          <label for="AIT">Allama Iqbal Town</label> 
         </div> 
         <div class="checkbox checkbox-primary"> 
          <input type="checkbox" id="GardenTown"> 
          <label for="GardenTown">Garden Town</label> 
         </div> 
         <div class="checkbox checkbox-primary"> 
          <input type="checkbox" id="Township"> 
          <label for="Township">Township</label> 
         </div> 
         <div class="checkbox checkbox-primary"> 
          <input type="checkbox" id="FaisalTown"> 
          <label for="FaisalTown">Faisal Town</label> 
         </div> 
         <a href="#">20 more locations</a> 
        </form> 
       </div><!-- form-group --> 
       <div class="clearfix"></div> 
       <h5 class="second">Availability</h5> 

       <div class="col-md-12 SelectDays"> 
        <a href="#" class="Day">M</a> 
        <a href="#" class="Day">T</a> 
        <a href="#" class="Day active">W</a> 
        <a href="#" class="Day">Th</a> 
        <a href="#" class="Day">F</a> 
        <a href="#" class="Day">S</a> 
        <a href="#" class="Day">SU</a> 
       </div><!-- SelectDays --> 

       <div class="col-md-12 TimeSet"> 
        <!-- timeFunction --> 
       </div><!-- TimeSet --> 

      </div><!-- col-md-12 --> 
     </div><!-- SearchParameters --> 

Các tham số tìm kiếm DIV tôi sử dụng để tạo kiểu cho mã.

Lưu ý: Tôi muốn thu gọn div "SearchParameters" div chỉ trên thiết bị di động và mở bằng nút .. Chỉ nên có 1 div. Tôi có thể ẩn div này và hiển thị một div khác hiển thị trên thiết bị di động nhưng đó không phải là cách tiếp cận tốt. Tôi muốn thu gọn div này và chỉ hiển thị nó trên nút bấm trên thiết bị di động.

Answer 1

Bạn có thể làm theo cách này:

<button class="visible-xs" data-toggle="collapse" data-target="#SearchParameters">Toggle it</button> 

<div class="hidden-xs col-md-3 col-sm-4 SearchParameters" id="SearchParameters"> 
... 

CSS:

#SearchParameters.in, 
#SearchParameters.collapsing { 
    display: block!important; 
} 

Answer 2

Kể từ khi "trong" lớp học là những gì xác định các yếu tố đóng mở như mở, loại bỏ nó vào nguyên nhân di động nó để bắt đầu hết hiệu lực.

Ví dụ:

<button data-toggle="collapse" data-target="#collapsible">Show/Hide</button> 
<div class="collapse in" id="collapsible"> 
    Content Here. 
</div> 
<div class="visible-xs" id="xs-check"></div> 
<script> 
if($("#xs-check").is(":visible")) 
    $("#collapsible").removeClass("in"); 
</script> 

Answer 3

Tại sao không sử dụng window.matchMedia?

Để đơn giản, tôi đã tạo một ví dụ dựa trên Andrew Dinmore. Nó không cần div trống thêm để kiểm tra xem nội dung nào đó có hiển thị hay không.

<button class="btn btn-default btn-block visible-xs hidden-sm hidden-md hidden-lg" data-toggle="collapse" data-target="#Foo">Toggle</button> 

<div id="Foo" class="collapse in"> 
    <!-- fancy content here --> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     if (matchMedia) { 
     var mq = window.matchMedia("(max-width: 768px)"); 
     mq.addListener(WidthChange); 
     WidthChange(mq); 
     } 

     function WidthChange(mq) { 
     if (mq.matches) { 
      $("#Foo").removeClass("in"); 
     } 
     } 
    }); 
    </script> 

tận hưởng! ;-)