Bootstrap 手风琴在加载时跳转到页面中心

Posted 2023-03-24

【中文标题】Bootstrap 手风琴在加载时跳转到页面中心

【英文标题】：Bootstrap accordion jumps to center of the page on load

【发布时间】：2019-08-10 13:00:19

【问题描述】：

我正在使用 Bootstrap 折叠构建一个侧面导航面板，并希望所有部分在加载时都打开。我下面的代码会这样做，但它也会在加载时跳转到页面的中间。看起来页面在第二个可扩展部分的正下方跳转。有没有办法解决这个问题？

<div class="panel-group" id="accordion" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" id="headingOne">
      <h4 class="panel-title"><a role="button" data-toggle="collapse" data-target="#collapseOne">My Case<i class="pull-right fa fa-plus"></i></a></h4>
    </div>
    <div class="panel-collapse collapse show" id="collapseOne">
      <div class="panel-body">
        <a href="javascript:void(0);" class="list-group-item">At A Glance</a> 
        <a href="javascript:void(0);" class="list-group-item">Authorized Representatives</a>
        <a href="javascript:void(0);" class="list-group-item">Benefits</a>
        <a href="javascript:void(0);" class="list-group-item">Granite Advantage</a>
        <a href="javascript:void(0);" class="list-group-item">Documents</a>
        <a href="javascript:void(0);" class="list-group-item">Notices</a>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" id="headingTwo">
      <h4 class="panel-title"><a role="button" data-toggle="collapse" data-target="#collapseTwo">My Profile<i class="pull-right fa fa-plus"></i></a></h4>
    </div>
    <div class="panel-collapse collapse show" id="collapseTwo">
      <div class="panel-body">
        <a href="javascript:void(0);" class="list-group-item">Contact Information</a> 
        <a href="javascript:void(0);" class="list-group-item">Get In Touch</a>
        <a href="javascript:void(0);" class="list-group-item">Security Settings</a>           
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" id="headingThree">
      <h4 class="panel-title">Need Help?</h4>
      <p class="small m-t-sm">If you have a question about your case, contact the Customer Service Center.</p>
      <br/>
      <i class="fas fa-phone fa-flip-horizontal m-r-sm blue"></i>1-844-CALL-HELP
      <br/>
      <i class="fas fa-envelope m-r-sm blue"></i><a href="#" target="_blank">Email</a> 
    </div>
  </div>
</div>

【参考方案1】：

从类名中删除“显示”。并将此脚本添加到 head 部分。

<script>
$(document).ready(function()
  $('#accordion .panel-collapse').collapse('toggle');
);
</script>

【讨论】：

您好，谢谢！我试过了，它确实让面板保持打开状态，但它仍然会在加载时跳转到第二个面板。不知道是什么在代码中发生这种情况...

当我检查 jsfiddle 时，一切似乎都很正常。检查页面上的脚本。 jsfiddle.net/emrahguclu/repz7owd/1