简体   繁体   English

折叠时的 Bootstrap 手风琴滚动行为

[英]Bootstrap accordion scrolling behaviour on collapse

I am using Bootstrap 3 accordion.我正在使用 Bootstrap 3 手风琴。 After reading numerous posts on how to have independent behaviour on the contents, rather than keeping only one active by default, i use data-target and the id if the content instead of the default data-parent of the accordion id.在阅读了许多关于如何对内容进行独立行为的帖子后,而不是默认情况下只保持一个活动状态,我使用data-target和 id 如果内容而不是手风琴 id 的默认data-parent The independent collapsing works fine, but now on collapse it scrolls to the top of the collapsible item.独立折叠工作正常,但现在折叠它滚动到可折叠项目的顶部。 How can I disable this scrolling behaviour whilst keeping the collapsible in-dependancy?如何在保持可折叠的独立性的同时禁用此滚动行为?

I think i know what causes the scrolling problem.我想我知道是什么导致了滚动问题。 If you are based on the example shown in getbootstrap.com , then you probably use anchors如果您基于getbootstrap.com 中显示的示例,那么您可能会使用锚点

<a data-toggle="collapse" data-content="#your-content" href="#your-content">...</a>

instead of anchors you can use spans您可以使用跨度代替锚点

<span data-toggle="collapse" data-content="#your-content">...<span>

The href in the anchor is causing the scroll.锚点中的 href 导致滚动。 I hope that helps我希望有帮助

Just add class="your-header-class" to the a header element:只需将class="your-header-class"a header元素:

<a class="your-header-class" data-toggle="collapse" data-content="#your-content" href="#your-content">...</a>

and then add this:然后添加这个:

$('.your-header-class').click(function(e) {
    e.preventDefault();
})

就我而言,我使用的button只是将其更改为div

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM