引导折叠按钮&可折叠列表组未折叠
引导折叠按钮&可折叠列表组未折叠
提问于 2018-07-16 19:33:38
有人能帮忙吗？我是Bootstrap的初学者，并且在它的站点上练习它，但是我不知道如何使它崩溃。
我喜欢collapse.js，jquery.min.js，bootstrap.min.js，transition.js，并将下面的内容添加到html中。它显示隐藏的div，但当再次单击按钮时，它不会将井的部分折叠回去。
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>它与下面的可折叠列表组相同。它在单击选项卡后显示隐藏的内容，但是如果我再次单击它，它不会隐藏内容。
<div class="panel-group" role="tablist">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="collapseListGroupHeading1">
<h4 class="panel-title">
<a href="#collapseListGroup1" class="collapsed" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseListGroup1"> Collapsible list group </a> </h4>
</div>
<div class="panel-collapse collapse" role="tabpanel" id="collapseListGroup1" aria-labelledby="collapseListGroupHeading1" aria-expanded="false" style="height: 0px;">
<ul class="list-group">
<li class="list-group-item">Bootply</li>
<li class="list-group-item">One itmus ac facilin</li>
<li class="list-group-item">Second eros</li> </ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>请告诉我。
非常感谢您的时间和帮助。
回答 1
Stack Overflow用户
发布于 2018-07-17 04:38:17
您使用了哪些版本的引导和Jquery.According引导4.0.0，您应该使用jQuery1.9.1。然后不需要使用collapse.js，transition.js.These也包含在bootstrap.min.js中。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-group" role="tablist">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="collapseListGroupHeading1">
<h4 class="panel-title">
<a href="#collapseListGroup1" class="collapsed" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="collapseListGroup1"> Collapsible list group </a> </h4>
</div>
<div class="panel-collapse collapse" role="tabpanel" id="collapseListGroup1" aria-labelledby="collapseListGroupHeading1" aria-expanded="false" style="height: 0px;">
<ul class="list-group">
<li class="list-group-item">Bootply</li>
<li class="list-group-item">One itmus ac facilin</li>
<li class="list-group-item">Second eros</li> </ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51368950
复制相关文章
相似问题
腾讯云开发者
