如何集成Bootstrap collapse和scrollspy？
如何集成Bootstrap collapse和scrollspy？
提问于 2018-01-21 02:11:24
我正在尝试使用Twitter Bootstrap来创建与http://www.oracle.com/webfolder/technetwork/tutorials/obe/java/HomeWebsocket/WebsocketHome.html相同的页面
这就是我现在所拥有的。https://jsfiddle.net/uvsq43bb/1/
我不能把所有的主题放在一起展示。如果我单击其中一个元素，然后单击“展开/折叠所有主题”，所有内容都会切换，但我想要的是一起显示和折叠所有项目。我的Scrollspy好像不工作了。有什么帮助吗？
还有，你知道如何水平折叠一列吗？当我点击“隐藏/显示主题列表”按钮时，我想折叠主题列表。
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse1" data-target=".multi-collapse" aria-expanded="false" aria-controls="list-example">Hide/Show Topic List</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="collapseOne collapseTwo collapseThree">Expand/Collapse all Topics</button>
</p>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-01-21 04:30:52
您可以使用jQuery实现这一点
$("#toggleBtnBtn").click(function(){
$("#toggleBtnList").toggle("slow")
});
$("#toggleBtnList").click(function(){
$(this).toggleClass("collapsed")
if($(this).hasClass("collapsed")){
$("[id^='collapse']").show("slow")
}
else $("[id^='collapse']").hide("slow")
})
$("[id^='head").click(function(){
var val = $(this).find("button").data("target")
$(val).toggle("slow")
})<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<p>
<button id="toggleBtnBtn" class="btn btn-primary" type="button" data-toggle="collapse1" data-target=".multi-collapse" aria-expanded="false" aria-controls="list-example">Hide/Show Topic List</button>
<button id="toggleBtnList" class="btn btn-primary" type="button">Expand/Collapse all topics</button>
</p>
<div>
<div class="row" >
<div class="col-4">
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#collapseOne">Overview</a>
<a class="list-group-item list-group-item-action" href="#collapseTwo">Introduction</a>
<a class="list-group-item list-group-item-action" href="#collapseThree">Summary</a>
</div>
</div>
<div class="col-8">
<div data-spy="scroll" data-target="#list-example" data-offset="0">
<div>
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Overview
</button>
</h5>
</div>
<div id="collapseOne" class="collapse multi-collapse" aria-labelledby="headingOne">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Introduction
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse multi-collapse" aria-labelledby="headingTwo">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Summary
</button>
</h5>
</div>
<div id="collapseThree" class="collapse multi-collapse" aria-labelledby="headingThree">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48359513
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号