Désactiver l'option à bascule dans le Bootstrap 3 de l'effondrement de l'accordéon sur les grandes résolutions

Peut la fonction de basculement sur Bootstrap effondrement de l'accordéon être désactivé uniquement sur les résolutions les plus élevées?

Le but est d'avoir l'accordéon s'est effondré sur les petites résolutions avec l'option pour basculer les états, et élargi sur les grandes résolutions avec aucune option pour basculer les états. Quelle serait la meilleure façon d'utiliser Bootstrap d'une fonctionnalité intégrée pour y parvenir?

J'ai fait du Violon démo avec ce que j'ai maintenant. Je ne suis pas bon avec JS.

JSFiddle DÉMO: 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');
  }
});
A ma réponse à résoudre le problème?
J'ai mis à jour le violon avec un peu de contenu au-dessous de l'accordéon et vous pouvez le voir sauter sur de grandes résolutions, si vous cliquez sur le lien, peut-il être évité. jsfiddle.net/1crojp98/3
Merci, c'est génial de travailler. En Ce Qui Concerne Meilleur!

OriginalL'auteur imag | 2015-01-23

  1. 12

    C'est possible. Vous devriez juste arrêter de l'événement click de propagation:

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

    J'ai mis à jour votre code sur jsFiddle http://jsfiddle.net/1crojp98/2/

    Mais ce code pour désactiver la possibilité de s'effondrer et d'ouvrir les panneaux (seulement pour les grandes résolutions, mais de toute façon).

    Merci, sur la résolution de grandes si je clique sur le lien, il fait défiler la page vers le bas, peut-il être évité?
    Oui, bien sûr. Vous devez simplement éviter le comportement par défaut de cet événement (j'ai mis à jour jsFiddle jsfiddle.net/1crojp98/4).
    Grande, qui a fait le tour. Je vous remercie pour votre aide Alex.

    OriginalL'auteur Alex Todef

  2. 2

    Vous pouvez simplement masquer le lien dans les résolutions les plus élevées, et de montrer une nue-propriété au lieu de cela, par exemple dans le panneau-titre:

    <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>
    Belle solution!

    OriginalL'auteur Rolleric