我正在尝试使用 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>
最佳答案
您可以使用 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>关于javascript - 如何整合 Bootstrap collapse 和 scrollspy？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48359513/