Bootstrap 手风琴：折叠或展开元素时如何避免页面滚动

Question

当我尝试折叠或展开手风琴的元素时出现意外的页面滚动。也许我只是在 bootstrap 网格系统上做错了什么？这是页面示例：

如何避免这种刺激性影响？
jsfiddle 可用 https://jsfiddle.net/Lfwvtyms/1/

<body>
<!--default navbar here-->
<main>
    <h1>Long long long long long long header header header header header header lng lasd lewq j</h1>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div id="task-list">
                    <div id="accordion" role="tablist" aria-multiselectable="true" class="panel-group">

                        <div class="panel panel-default">
                            <div id="headingOne" role="tab" class="panel-heading"><h4 class="panel-title"><a
                                    data-toggle="collapse" data-target="#collapseOne" href="#collapseOne"
                                    aria-expanded="true" aria-controls="collapseOne">First list</a></h4></div>
                            <div id="collapseOne" role="tabpanel" aria-labelledby="headingOne"
                                 class="panel-collapse collapse in">
                                <ul class="list-group">
                                    <li class="list-group-item">Item1</li>
                                    <li class="list-group-item">Item2</li>
                                    <li class="list-group-item">Item3</li>
                                </ul>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <div id="headingTwo" role="tab" class="panel-heading"><h4 class="panel-title"><a
                                    data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo"
                                    aria-expanded="true" aria-controls="collapseTwo">Another list</a></h4></div>
                            <div id="collapseTwo" role="tabpanel" aria-labelledby="headingTwo"
                                 class="panel-collapse collapse in">
                                <ul class="list-group">
                                    <li class="list-group-item">Item1</li>
                                    <li class="list-group-item">Item2</li>
                                    <li class="list-group-item">Item3</li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>

                <div id="someDiv">
                    <div class="row">
                        <div class="col-xs-12">
                            <div id="dummy">Div with fixed height here</div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</main>
<footer class="container-fluid">my footer here</footer>
</body>

Answer 1

将 a 元素的 href 属性替换为 # 而不是 #collapseOne

而不是这个：

<a data-toggle="collapse" data-target="#collapseTwo" href="#collapseTwo"
     aria-expanded="true" aria-controls="collapseTwo">

这样做

<a data-toggle="collapse" data-target="#collapseTwo" href="#"
     aria-expanded="true" aria-controls="collapseTwo">

Answer 2

我遇到了同样的问题。结果是 href 导致了问题。如果您不希望页面在 collapse/expand 时滚动，这正是我想要的，那么只需完全删除 href。将其保留为 # 仍然使屏幕滚动到顶部。

对我不起作用：

<a data-toggle="collapse" data-target="#collapseOne" href="#SectionOne"></a>
<a data-toggle="collapse" data-target="#collapseOne" href="#"></a>

工作：

<a data-toggle="collapse" data-target="#collapseOne"></a>

在这里查看我的更新： https://jsfiddle.net/Lfwvtyms/5/

Answer 3

我有同样的问题（点击触发折叠切换的 link 跳转到顶部） href="#" 已更改为 href="javascript:void(0);" 并且效果很好（无需滚动到顶部即可切换折叠）

Answer 4

我遇到了同样的问题，我在另一个 post 上找到了这个答案的解决方案。

除了添加到我的自定义 .js 文件中的这一小块 Javascript 之外，其他任何东西都不起作用。它顺利地将焦点带回选定的面板标题。我为适应我的设计而唯一改变的是第 6 行到顶部的距离。

https://whosebug.com/a/38180220/4844273

$('#accordion').on('shown.bs.collapse', function () {

    var panel = $(this).find('.in');

    $('html, body').animate({
        scrollTop: panel.offset().top - 130
    }, 500);
});

Answer 5

您可以覆盖点击处理程序并在点击事件上使用 preventDefault() 方法：

$('.aHandler').click( function(event) {
    event.preventDefault();
    ...
});

其中 'aHandler' 是 'a' 标签上的 class：<a class="aHandler" ...>...</a>，或者是任何其他有效的 jquery selector。

Answer 6

如果您别无选择，这绝对有效：

$('.panel-group').on('click', function(){
  $('html,body').stop();
});

Answer 7

另一种选择是使用按钮而不是锚链接，这样一开始就不会触发 href。例如，而不是第一个 <a>:

<button data-toggle="collapse" data-target="#collapseOne"
  aria-expanded="true" aria-controls="collapseOne">
  First list
</button>

在 this documentation 中有很多使用 <button> 而不是 <a> 的示例。

Bootstrap 手风琴：折叠或展开元素时如何避免页面滚动

Bootstrap accordion: how to avoid page scroll when collapse or expand elements

html

css

twitter-bootstrap

twitter-bootstrap-3