[英]How to integrate Bootstrap collapse and scrollspy?
我正在嘗試使用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>
使用bootstrap scrollspy為崩潰的div，到附加的側邊欄
[英]Using bootstrap scrollspy for a div with collapse, to an affixed sidebar
使用Bootstrap，Scrollspy和Collapse嵌套，折疊側邊欄導航？
[英]Nested, collapsing sidebar nav with Bootstrap, Scrollspy, and Collapse?
Bootstrap Scrollspy-如何獲取下拉列表到scrollspy？
[英]Bootstrap Scrollspy - How to get a dropdown list to scrollspy?
單擊 scrollspy 鏈接時折疊 Bootstrap 漢堡菜單
[英]Collapse the Bootstrap burger menu when you click on a scrollspy link
如何在特定距離處停止twitter bootstrap scrollspy？
[英]How to stop twitter bootstrap scrollspy at a certain distance?
Bootstrap Scrollspy 不起作用：Scrollspy 不是一個函數
[英]Bootstrap Scrollspy not working: Scrollspy is not a function
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.