Disabilita l'opzione di commutazione in Bootstrap 3 crollo fisarmonica su grandi risoluzioni

Question

Può l'alternabile su Bootstrap crollo fisarmonica essere disattivato solo su risoluzioni più grandi?

L'obiettivo è far sì che la fisarmonica venga compressa su risoluzioni ridotte con l'opzione di alternare stati e espansa su risoluzioni grandi senza possibilità di alternare stati. Quale sarebbe il modo migliore per utilizzare Bootstrap integrato nella funzionalità per raggiungere questo obiettivo?

Ho realizzato una demo di Fiddle con quello che ho ora. Non sto bene con 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

è possibile. Si dovrebbe solo smettere di propagazione del evento click:

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

Ho aggiornato il codice su jsFiddle http://jsfiddle.net/1crojp98/2/

Ma questo codice disabilitare la possibilità di entrambi i pannelli di collasso e aperti (solo per risoluzioni maggiori, ma in ogni caso).

Answer 2

Si potrebbe semplicemente nascondere il collegamento nelle risoluzioni più grandi e mostrare invece un titolo nullo, ad es. all'interno dell'intestazione del pannello:

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