Wyłącz opcję przełączania w Bootstrapie 3 Zwinięcie akordeonu w dużych rozdzielczościach

Question

Czy funkcja przełączania na akordeonie zwinięcia Bootstrap może być wyłączona tylko w większych rozdzielczościach?

Celem jest akordeon zawalony na małych rozdzielczościach z opcją przełączania stanów i rozszerzony na duże rozdzielczości bez opcji przełączania stanów. Jaki byłby najlepszy sposób wykorzystania wbudowanej funkcji Bootstrap, aby to osiągnąć?

Zrobiłem demo Fiddle z tym, co mam teraz. Nie jestem dobry z 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

To możliwe. Należy po prostu powstrzymać rozprzestrzenianie kliknięciem eventu:

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

zaktualizowałem swój kod na jsFiddle http://jsfiddle.net/1crojp98/2/

Ale ten kod wyłącza możliwość zarówno do upadku i otwartych paneli (tylko dla większych rozdzielczościach, ale tak czy owak).

Answer 2

Można po prostu ukryć łącze w większych rozdzielczościach i zamiast tego wyświetlać nagi tytuł, np. w nagłówku panelu:

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