Interrupteur des onglets à l'effondrement de réactif
L'objectif est de changer les onglets pour un style accordéon effondrement lorsque le site est à moins de 676px de large. Nous sommes en utilisant Bootstrap.
Nous allons cacher ul.nav-tabs et un.accordtion-bascule respectivement avec les css. Les onglets de travail ici, mais la un.accordion-toggle ne sont pas de travail. Des idées?
<ul class="nav nav-tabs" id="myTab" data-tabs="tabs">
<li class="active"><a href="#panel1" data-toggle="tab">Panel 1</a></li>
<li class="active"><a href="#panel2" data-toggle="tab">Panel 2</a></li>
</ul>
<a class="accordion-toggle" data-toggle="collapse" data-target="#panel>Panel 1</a>
<div class="tab-pane collapse" id="panel1">
Panel 1 Content
</div>
<a class="accordion-toggle" data-toggle="collapse" data-target="#pane2>Panel 2</a>
<div class="tab-pane collapse" id="panel2">
Panel 2 Content
</div>
<script>
jQuery(document).ready(function ($) {
if (document.documentElement.clientWidth < 767) {
$('#myTab a').click(function (e) {
e.preventDefault();
}
$(".collapse").collapse();
}
});
</script>
- L'collé le code a guillemet manquant sur les attributs et le JS ne pas faire n'importe quoi. L'un des
.accordion-toggle[data-target]
est également incomplète. - Avez-vous pensé à utiliser l'effondrement de plugin dans le
.nav-tabs
au lieu de l'onglet plugin ?
Vous devez vous connecter pour publier un commentaire.
J'ai essayé un peu sur cette jsfiddle mais il semble compliqué de faire les deux plugins travailler ensemble.
Il pourrait être préférable d'opter pour l'un des plugin, en utilisant uniquement les classes et JS de ce plugin, puis de mettre en œuvre vos propres déclencheurs pour terminer le comportement par défaut.
Je pense que l'accordéon comportement de l'effondrement plugin a besoin de la
.accordion-group > .collapse.in
structure pour fonctionner correctement - si vous n'utilisez pas votre propre JS.Dans mon cas il suffit de copier les onglets de contenu cachés de l'accordéon a bien fonctionné.
Ici est la source, j'ai extrait de petit plugin - Bootstrap Onglet Effondrement
J'ai fini par l'imbrication de l'onglet déclencheurs à l'intérieur d'un div avec les onglets de contenu (au lieu d'une liste ci-dessus) et à l'aide de css pour le positionnement comme les onglets de la vue plein écran. Pas l'idéal, mais fonctionne tant que les données de la bascule des données et de la cible sont en place.
Ne sais pas si ça aide mais vous pouvez utiliser la fenêtre.onresize = function() {} et vérifiez la largeur de votre conteneur principal. Lorsqu'il est inférieur à une certaine largeur vous pouvez remplacer le contenu à l'aide de js.