Bootstrap崩溃-转到未完成项目的顶部? [英] Bootstrap collapse - go to top of the open item?
本文介绍了Bootstrap崩溃-转到未完成项目的顶部?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用bootstrap折叠功能，但是当我打开一个包含大量内容的元素，然后打开下一个元素时，它会跳下并且不会到达打开元素的顶部.我尝试使用如下所示的scrollto插件，但是它不起作用:
I'm using the bootstrap collapse function, but when I open an element which has a lot of content, then open the next element, it jumps down and doesn't go to the top of the open element. I've tried using scrollto plugin as shown below but it doesn't work:
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>
有什么想法吗?
推荐答案
我可以使用scrollto进行Bootstrap崩溃，但是代码适用于WordPress.我带来了您的内容，它可以正常工作. Bootstrap Collapse有一个显示的事件，然后您需要知道内容的高度才能向上滚动.
I have scrollto working with bootstrap collapse but the code is for WordPress. I brought in your content and it works. Bootstrap Collapse has a shown event and then you need to know the height of the content to scroll up.
$(".accordion-body").on("shown", function () {
var selected = $(this);
var collapseh = $(".collapse .in").height();
$.scrollTo(selected, 500, {
offset: -(collapseh)
});
});
您可能需要稍作调整，但它应该可以工作.
You may need to tweak it a bit but it should work.
这篇关于Bootstrap崩溃-转到未完成项目的顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
