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

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

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

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

1 个答案: