我正在使用引导崩溃功能,但是当我打开一个具有很多内容的元素时,打开下一个元素,它跳下来,而不是打开元素的顶部.我试过使用如下所示的scrollto插件,但它不起作用：
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>
有任何想法吗？
@H_403_12@解决方法
我有scrollto使用引导崩溃,但代码是为wordpress.我带来了你的内容,它的作品. Bootstrap Collapse有一个显示的事件,然后您需要知道要向上滚动的内容的高度.
$(".accordion-body").on("shown",function () {
var selected = $(this);
var collapseh = $(".collapse .in").height();
$.scrollTo(selected,500,{
offset: -(collapseh)
});
});
你可能需要调整一点,但它应该工作.
@H_403_12@ @H_403_12@ 原文链接：https://www.f2er.com/jquery/180369.html