Bootstrap 4-崩溃和Scrollspy
Bootstrap 4-崩溃和Scrollspy
提问于 2018-06-09 10:55:54
我在我的网站上有一些使用折叠的元素。我想在我的菜单中实现一个指向这些元素的链接。当链接被按下时，我希望元素折叠并集中在它上面。
我不能让这两个动作都工作。当我删除数据时-从以下行切换：
<a class="nav-link" href="#collapsegs" data-toggle="collapse" data-target="#collapsegs" aria-expanded="false" aria-controls="collapsegs">
Home
</a>
<div class="card">
<div class="card-header" id="headinggs">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapsegs" aria-expanded="false" aria-controls="collapsegs">
open
</button>
</h5>
</div>
<div id="collapsegs" class="collapse" aria-labelledby="headinggs" data-parent="#accordion">
<div class="card-body">然后scrollspy可以工作，但崩溃不能。
回答 1
Stack Overflow用户
发布于 2018-06-09 11:05:20
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<a class="btn btn-primary" href="#collapseOne" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseOne">Collapse One</a>
<a class="btn btn-primary" href="#collapseTwo" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseTwo">Collapse Two</a>
<a class="btn btn-primary" href="#collapseThree" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseThree">Collapse Three</a>
<br/><br/>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Body 1
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Body 2
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Body 3
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50770503
复制相关文章
相似问题