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

Question

我正在使用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>

Answer 1

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

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