个人中心
gpt4 book ai didi

javascript - 如何整合 Bootstrap collapse 和 scrollspy？

转载 作者：行者123 更新时间：2023-11-30 14:49:40 26 4
gpt4 key购买 nike

我正在尝试使用 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/

26 4 0
文章推荐： javascript - Vuejs 如何将数据作为 Prop 传递给子组件
文章推荐： javascript - 如何使按钮执行相同的代码但相应地具有不同的变量？
文章推荐： javascript - 在不导入的情况下导出组件时出错
文章推荐： javascript - JQuery - 将字符串转换为对象并添加 "click"事件在模块模式中不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com