Vô hiệu hóa tùy chọn chuyển đổi trong Bootstrap 3 thu gọn accordion trên các độ phân giải lớn

Question

Có thể chức năng chuyển đổi trên Reststrap sụp đổ accordion chỉ bị vô hiệu hóa trên độ phân giải lớn hơn?

Mục đích là để có sự co cụm được thu nhỏ trên các độ phân giải nhỏ với tùy chọn chuyển đổi trạng thái và mở rộng ở độ phân giải lớn mà không có tùy chọn để chuyển trạng thái. Điều gì sẽ là cách tốt nhất để sử dụng Bootstrap được xây dựng trong chức năng để đạt được điều này?

Tôi đã tạo bản trình diễn Fiddle với những gì tôi có bây giờ. Tôi không giỏi với JS.

JSFiddle DEMO: http://jsfiddle.net/1crojp98/1/

HTML:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 

    <div class="panel panel-default col-sm-6"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
      <h4 class="panel-title text-center"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
      Panel 1 
      </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique laoreet dui, id porttitor ipsum convallis vel. Integer turpis nisl, rhoncus sed hendrerit sit amet, adipiscing nec eros. Suspendisse potenti. Nam quis risus libero. Vestibulum et diam nisl, eget feugiat leo.</p> 
      </div> 
     </div> 
    </div> 

    <div class="panel panel-default col-sm-6"> 
     <div class="panel-heading" role="tab" id="headingTwo"> 
      <h4 class="panel-title text-center"> 
       <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
        Panel 2 
       </a> 
      </h4> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo"> 
      <div class="panel-body"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique laoreet dui, id porttitor ipsum convallis vel. Integer turpis nisl, rhoncus sed hendrerit sit amet, adipiscing nec eros. Suspendisse potenti. Nam quis risus libero. Vestibulum et diam nisl, eget feugiat leo.</p> 
      </div> 
     </div> 
    </div> 

</div> 

Javascript:

$(document).ready(function(){ 
    if ($(window).width() <= 768){ 
    $('.panel-collapse').removeClass('in'); 
    } 
}); 

$(window).resize(function(){ 
    if ($(window).width() >= 768){ 
    $('.panel-collapse').addClass('in'); 
    } 
    if ($(window).width() <= 768){ 
    $('.panel-collapse').removeClass('in'); 
    } 
}); 

Answer 1

Đó là có thể. Bạn chỉ nên dừng lại tuyên truyền sự kiện click của:

$('a[data-toggle="collapse"]').click(function(e){ 
    if ($(window).width() >= 768) { 
    e.stopPropagation(); 
    }  
}); 

Tôi đã cập nhật mã của bạn trên jsFiddle http://jsfiddle.net/1crojp98/2/

Nhưng mã này sẽ vô hiệu hóa khả năng cả sụp đổ và mở tấm (chỉ dành cho độ phân giải lớn hơn, nhưng dù sao).

Answer 2

Bạn chỉ có thể ẩn liên kết ở độ phân giải lớn hơn và hiển thị tiêu đề trống thay thế, ví dụ: trong bảng điều khiển-tiêu đề:

<h4 class="panel-title text-center"> 
    <a class="hidden-sm hidden-md hidden-lg" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
    Panel 1 
    </a> 
    <div class="hidden-xs"> 
    Panel 1 
    </div> 
</h4>