Bootstrap effondrement - aller en haut de l'élément ouvert?
Je suis en utilisant le bootstrap de l'effondrement de la fonction, mais quand j'ai ouvert un élément qui a beaucoup de contenu, puis ouvrez l'élément suivant, il saute et ne pas aller vers le haut de l'élément ouvert. J'ai essayé d'utiliser scrollto plugin comme indiqué ci-dessous mais ça ne fonctionne pas:
JS:
$(function(){
$('a.accordion-toggle').click(function(){
$.scrollTo( this, 500);
})
});
HTML:
<div class="accordion" id="accordion2">
<div class="accordion-group heading-left-11">
<h5 class="accordion-heading row">
<a class="accordion-toggle span11" data-toggle="collapse" data-parent="#accordion2" href="#collapse1">Austria</a>
<div class="icon-rt span1">
<span class="icn"></span>
</div>
</h5>
<ul id="collapse1" class="member_list accordion-body collapse row">
<li class="accordion-inner pull-left span4">
<a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=101">Filmladen</a>
<span> Michael Stejskal</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=101" title="Filmladen" ><img src="http://dev.europa-distribution.org/assets/logos_film_laden-570x190.png" alt="Filmladen" ></a>
</li>
<li class="accordion-inner pull-left span4">
<a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=194">Polyfilm</a>
<span> Hans Koenig</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=194" title="Polyfilm" ><img src="http://dev.europa-distribution.org/assets/logos_polyfilm-570x190.png" alt="Polyfilm" ></a>
</li>
<li class="accordion-inner pull-left span4">
<a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=228">Stadtkino Filmverleih</a>
<span> Claus Philipp</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=228" title="Stadtkino Filmverleih" ><img src="http://dev.europa-distribution.org/assets/logos_stadtkino_filmverleih-570x190.png" alt="Stadtkino Filmverleih" ></a>
</li>
</ul>
</div>
<div class="accordion-group heading-left-11">
<h5 class="accordion-heading row">
<a class="accordion-toggle span11" data-toggle="collapse" data-parent="#accordion2" href="#collapse2">Belgium</a>
<div class="icon-rt span1">
<span class="icn"></span>
</div>
</h5>
<ul id="collapse2" class="member_list accordion-body collapse row">
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=6">ABC</a><span> Nicolaine Den Breejen</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=6" title="ABC" ><img src="http://dev.europa-distribution.org/assets/logos_genci_kino_abc-570x190.png" alt="Genci kino abc" ></a></li>
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=61">Cineart-Cinelibre</a><span> Eliane du Bois & Stephan de Potter</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=61" title="Cineart-Cinelibre" ><img src="http://dev.europa-distribution.org/assets/logos_cineart-570x190.png" alt="Cineart" ></a></li>
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=127">Imagine Film Distribution</a><span> Christian Thomas & Tinne Bral</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=127" title="Imagine Film Distribution" ><img src="http://dev.europa-distribution.org/assets/logos_imagine-570x190.png" alt="Imagine" ></a></li>
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=214">Le Parc Distribution</a><span> Jean-Pierre Pécasse</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=214" title="Le Parc Distribution" ><img src="http://dev.europa-distribution.org/assets/logos_le_parc-570x190.png" alt="le Parc distribution" ></a></li>
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=145">Lumière</a><span> Jan de Clerq & Annemie Degryse</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=145" title="Lumière" ><img src="http://dev.europa-distribution.org/assets/logos_lumiere-570x190.png" alt="logos_lumiere" ></a></li>
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=383">O’Brother</a><span> Olivier Bronckart</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=383" title="O’Brother" ><img src="http://dev.europa-distribution.org/assets/logos_obrother_distribution-570x190.png" alt="obrother distribution" ></a></li>
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=185">Paradiso Filmed Entertainment</a><span> Olivier Mortagne</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=185" title="Paradiso Filmed Entertainment" ><img src="http://dev.europa-distribution.org/assets/logos_paradiso-570x190.png" alt="Paradiso Films" ></a></li>
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=529">U-Dream</a><span> Stephanie Van den Berge</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=529" title="U-Dream" ><img src="http://dev.europa-distribution.org/assets/logos_udream-570x190.png" alt="uDream" ></a></li>
</ul>
</div>
<div class="accordion-group heading-left-11">
<h5 class="accordion-heading row">
<a class="accordion-toggle span11" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">Bulgaria</a>
<div class="icon-rt span1">
<span class="icn"></span>
</div>
</h5>
<ul id="collapse3" class="member_list accordion-body collapse row">
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=337">Artfest</a><span> Stefan Kitanov & Mira Staleva</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=337" title="Artfest" ><img src="http://dev.europa-distribution.org/assets/logos_artfest-570x190.png" alt="Art Fest" ></a></li>
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=302">Pro Films</a><span> Emil Simeonov</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=302" title="Pro Films" ><img src="http://dev.europa-distribution.org/assets/logos_pro_films-570x190.png" alt="Pro Films" ></a></li>
</ul>
</div>
<div class="accordion-group heading-left-11">
<h5 class="accordion-heading row">
<a class="accordion-toggle span11" data-toggle="collapse" data-parent="#accordion2" href="#collapse4">Canada</a>
<div class="icon-rt span1">
<span class="icn"></span>
</div>
</h5>
<ul id="collapse4" class="member_list accordion-body collapse row">
<li class="accordion-inner pull-left span4">Metropole Films<span> Charles Tremblay</span><img src="http://dev.europa-distribution.org/assets/logos_metropole_film_distribution-570x190.png" alt="métropole Films Distribution" ></li>
</ul>
</div>
Des idées?
OriginalL'auteur user1937021 | 2013-02-01
Vous devez vous connecter pour publier un commentaire.
J'ai scrollto travailler avec des fichiers d'amorce de l'effondrement, mais le code est pour WordPress. J'ai apporté dans votre contenu, et cela fonctionne. Bootstrap Effondrement a montré un événement et vous avez besoin de connaître la hauteur du contenu pour défiler vers le haut.
Vous devrez peut-être ajuster un peu, mais ça devrait fonctionner.
OriginalL'auteur
Le nom de l'événement qui a changé dans le Bootstrap 3, donc @bboymaanu est ne fonctionne pas comme indiqué. Il doit utiliser la montre.bs.l'effondrement de l'événement à la place.
Les nouveaux événements sont documenté ici.
OriginalL'auteur
Ici est une solution construite sur les autres suggestions:
Code:
var actualAccordianId = $('a[href="#' + $(e.target).attr('id') + '"]').data('parent');
OriginalL'auteur
Exemple Simple. L' ".haut + -50" est Moins 50px à partir du haut de l'élément permettant à certains de remplissage au top.
OriginalL'auteur
OriginalL'auteur
Vous pouvez essayer ceci:
J'ai utilisé le suivant, fonctionne comme un charme:
Il donne également un effet de rebond, et je l'aime.
OriginalL'auteur