Question

我在项目中使用bootstrap 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（#div_addtraining）的id。

在底线：

替换

<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>

单击引导程序崩溃时页面丢失当前位置

1 个答案: