jQuery Bootstrap 折叠 - 转到打开项目的顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14646231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-26 13:49:10 来源:igfitidea点击:
Bootstrap collapse - go to top of the open item?
提问by user1937021
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:
我正在使用 bootstrap 折叠功能，但是当我打开一个包含大量内容的元素，然后打开下一个元素时，它会跳下来并且不会到达打开元素的顶部。我试过使用 scrollto 插件，如下所示，但它不起作用：
JS:
JS：
$(function(){
$('a.accordion-toggle').click(function(){
$.scrollTo( this, 500);
})
});
HTML:
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>
Any ideas?
有任何想法吗？
采纳答案by ellenmva
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.
我有使用 bootstrap 折叠的滚动条，但代码适用于 WordPress。我带来了你的内容并且它有效。Bootstrap Collapse 有一个显示事件，然后您需要知道要向上滚动的内容的高度。
$(".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.
您可能需要稍微调整一下，但它应该可以工作。
回答by pIxelnate
The event name has changed in Bootstrap 3, so @bboymaanu's won't work as shown. It should use the 'shown.bs.collapse' event instead.
Bootstrap 3 中的事件名称已更改，因此 @bboymaanu 将无法正常工作。它应该使用 'shown.bs.collapse' 事件代替。
$(".accordion-body").on("shown.bs.collapse", function () {
var selected = $(this);
var collapseh = $(".collapse.in").height();
$.scrollTo(selected, 500, {
offset: -(collapseh)
});
});
The new events are documented here.
此处记录了新事件。
回答by Neromancer
Here is a solution built on others suggestions which:
这是一个基于其他建议的解决方案，其中：
- also works for embedded accordians
- scrolls so the header is also shown
- only if not already on screen
- animates as well
- 也适用于嵌入式手风琴
- 滚动所以标题也显示
- 仅当尚未出现在屏幕上时
- 动画也一样
Code:
代码：
$('#accordion').on('shown.bs.collapse', function (e) {
// Validate this panel belongs to this accordian, and not an embedded one
var actualAccordianId = $('a[href="#' + $(e.target).attr('id') + '"').data('parent');
var targetAccordianId = '#' + $(this).attr('id');
if (actualAccordianId !== targetAccordianId) return;
var clickedHeader = $(this).find('.panel > .collapse.in').closest('.panel').find('.panel-heading');
var offset = clickedHeader.offset();
var top = $(window).scrollTop();
if(offset) {
var topOfHeader = offset.top;
if(topOfHeader < top) {
$('html,body').animate({ scrollTop: topOfHeader}, 100, 'swing');
}
}
});
回答by rotamota
$(".accordion-body").on("shown", function () {
var id = $(this).attr('id');
$('html, body').animate({scrollTop: $('#'+id).offset().top + -50}, 1000);
});
});
Simple Example. The ".top + -50" is Minus 50px from the top of the element allowing some padding at the top.
简单的例子。“.top + -50”是从元素顶部减去 50px 允许在顶部有一些填充。
回答by Kinjal Gohil
$('#accordion').on('shown.bs.collapse', function () {
var panel = $(this).find('.in');
$('html, body').animate({
scrollTop: panel.offset().top
}, 500);
});
回答by TheAshwaniK
You can try this:
你可以试试这个：
I used the following, works like a charm:
我使用了以下内容，就像一个魅力：
$("#accordion2").bind('shown', function() {
var active=$("#accordion_univlist .in").attr('id');
scrollhere('#'+active);
$('.closebutton-right').hide();
});
$('.accordion-heading').click(function () {
// Do something if you want to do on click else ignore this handler.
}
function scrollhere(destination){
var stop = $(destination).offset().top - 80;
var delay = 1000;
$('body,html').animate({scrollTop: stop}, delay);
return false;
}
It also gives a bounce effect, and I like it.
它还提供了反弹效果，我喜欢它。
