Question

我正在尝试使用Twitter Bootstrap来创建相同的页面 http://www.oracle.com/webfolder/technetwork/tutorials/obe/java/HomeWebsocket/WebsocketHome.html

这就是我现在所拥有的。 https://jsfiddle.net/uvsq43bb/1/

我无法崩溃并一起显示所有主题。如果我单击其中一个元素，然后单击＆＃34;展开/折叠所有主题＆＃34;，一切只是切换但我想要的是显示和折叠所有项目。而我的Scrollspy似乎不起作用。有什么帮助吗？

还知道如何水平折叠列吗？当我点击＆＃34;隐藏/显示主题列表＆＃34;我想要折叠主题列表。按钮。

<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>

Answer 1

您可以使用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 collapse和scrollspy？

1 个答案: