Bootstrap: Effondrement d'autres sections lorsque l'on est élargi
Je fais une application Rails, et suis en train de réaliser une fonctionnalité particulière concernant de Twitter Bootstrap l'effondrement. Ours avec moi, comme je l'expliquer.
J'ai actuellement le point de vue suivant:
Lors de chacun de ces boutons est cliqué, leur data-toggle div est élargi. L'affichage est défini comme suit:
<button class="btn dropdown" data-toggle="collapse" data-target="#keys"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right"><%= @app.keys.count %></span></button>
<button class="btn dropdown" data-toggle="collapse" data-target="#attrs"><i class="icon-chevron-right"></i> Attributes</button>
<button class="btn dropdown" data-toggle="collapse" data-target="#edit"><i class="icon-chevron-right"></i> Edit Details</button>
<div class="collapse indent" id="keys">
<!--content-->
</div>
<div class="collapse indent" id="attrs">
<!--content-->
</div>
<div class="collapse" id="edit">
<!--content-->
</div>Je les ai mis en place comme ça, parce que je veux que les boutons côte à côte, dans une rangée. Si j'ai déplacer les boutons à droite au-dessus de la vue qu'elles agrandir/réduire, puis les boutons de la pile sur le dessus de l'un de l'autre.
Donc, mon objectif final est d'avoir les trois boutons côte à côte et ont leur effondrement et d'élargir leurs sections respectives. La configuration actuelle fonctionne, cependant, est un peu maladroit. Par exemple, si quelqu'un étend la section clés et augmente alors la section attributs, ils ont pour faire défiler ci-dessous la section clés.
Il y a deux solutions possibles à ce problème. On est qu'en appuyant sur un bouton provoque les 2 autres à l'effondrement eux-mêmes. Cela signifie qu'à un moment donné, un seul de ces sections est élargi.
La meilleure solution, je pense, serait de faire en sorte que lorsque des touches est élargi, les boutons vers la droite déplacer vers le bas de l'clés de div, et lorsque les attributs est développé, le modifier les détails bouton se déplace vers le bas de la div. Est-ce possible? J'ai déjà essayé de le faire en laissant les boutons de les empiler les uns les autres et de changer leur position par css, mais cela ne fonctionne pas car lorsque l'une des sections a été élargi, les autres boutons retrouvé dans une mauvaise spots dans le milieu de l'élargissement de la section.
Enfin, je voudrais essayer de le faire sans l'accordéon de style de comportement comme mentionné sur twitter bootstrap page, mais si quelqu'un peut me convaincre d'un point de vue design, qu'il est préférable, je serais certainement reconsidérer.
- Avez-vous regardé dans le
data-parentattribut ..? - Non, mais je vais et je reviendrai pour vous dire si cela a aidé. Merci!
- Qui n'a pas fonctionné pour moi. Je ne suis pas sûr, j'ai peut-être fait quelque chose de mal. Toute aide serait toujours apprécié.
Vous devez vous connecter pour publier un commentaire.
À l'aide de
data-parent, la première solution est de s'en tenir à l'exemple de sélecteur architectureDémo (jsfiddle)
Deuxième solution consiste à lier sur les événements et de masquer les autres pliable éléments de vous-même.
Démo (jsfiddle)
PS: l'étrange effet sur les démos est causée par le
min-heightensemble pour l'exemple, il suffit de les ignorer cela.Edit: changé la JS cas de
showàshow.bs.collapsecomme spécifié dans Bootstrap, documentation.data-parentinfo a été précieux dans l'obtention de ce travail. Merci!<div class="accordion-group">...</div>était la pièce manquante. Simplement à l'aide dedata-parentn'a pas aidé. Je n'ai pas vu l'exigence deaccordion-groupclasse de bootstrap, documentation. Merci!'> .accordion-group > .in'(src sur github)Si vous ne voulez pas changer votre balisage, cette fonction fait le truc:
Chaque fois qu'un BOUTON est cliqué, toutes les sections devenir s'est effondré. Puis bootstrap ouvre celui que vous avez sélectionné.
(e)ici?$('.collapse:not(:last-child)').collapse('hide');Si vous êtes en utilisant Bootstrap 4, et que vous ne voulez pas changer votre balisage:
Bootstrap 3 exemple avec à côté des boutons ci-dessous le contenu
CSS:
HTML:
Bootstrap 3 exemple avec à côté des boutons au-dessus du contenu
CSS:
HTML:
Si vous vous en tenez à la structure HTML et le bon sélecteurs selon l'Amorçage de la convention, vous devriez être bien.
DÉMO
Utiliser ceci:
.not(this)était la chose que je cherchais!Dans le bootstrap 4 pour fermer toutes les collapseds fonctionne comme ceci:
ACTION:
JQUERY:
Ajouter le
data-parentattribut à lacollapseéléments plutôt que sur labutton.de travail comme un charme ici pour bootstrap 4>4.1.1
La Méthode Fonctionne bien Pour moi:
Cela a été utile pour moi:
Il s'est effondré déjà ouvert la section.
Thnks à GrafiCode Studio