javascript - 单击 bootstrap 折叠时页面丢失当前位置

Question

我在我的元素中使用 bootstrap collapse 。 Collapse 工作正常，但问题是，我在长时间滚动后放置了这个折叠菜单，

当我点击可折叠链接时，页面滚动到顶部。

如何解决这个滚动问题，因为我希望页面与折叠前的位置相同。

这是我的代码:

<div class="row">
  <div class="col-md-12">
    <br />
    <h4><a href="#" data-toggle="collapse" data-target="#div_addtraining">Insert Training</a><br /></h4>
    <div id="div_addtraining" class="collapse"  style="overflow-x:auto;">
      Test    Test    Test    Test    <br />Test    Test    Test    <br />
    </div>
  </div>
</div>

这是一个例子:

http://jsbin.com/sayunibobu/1/edit?html,js,output

Answer 1

问题出在 href 属性上。如果您使用 a 作为触发器，只需使用 href 作为折叠 div 的 ID (#div_addtraining)。

归根结底:

替换

<a href="#" data-toggle="collapse" data-target="#div_addtraining"> 

到

<a href="#div_addtraining" data-toggle="collapse">

和工作示例:

.row {
  margin-top:3000px;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-12">
    <br />
    <h4><a href="#div_addtraining" data-toggle="collapse">Insert Training</a><br /></h4>
    <div id="div_addtraining" class="collapse"  style="overflow-x:auto;">
      Test    Test    Test    Test    <br />Test    Test    Test    <br />
    </div>
  </div>
</div>