bootstrap手风琴折叠示例代码分享

本文实例为大家分享了bootstrap手风琴的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 <title>XXX</title>
 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
 <link rel="stylesheet" href="css/main.css">
 <!--[if lt IE 9]>
 <script src="lib/html5shiv/html5shiv.min.js"></script>
 <script src="lib/respond/respond.min.js"></script>
 <![endif]-->
</head>
<body style="margin: 200px;">
<!--基本实例-->
<button class="btn btn-primary" data-toggle="collapse" data-target="#content">
 Bootstrap
</button>
<div class="collapse" id="content">
<!--<div class="collapse fade in" id="content">-->
 <div class="well">
 Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由
 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。目
 前,Bootstrap 最新版本为 3.0 。
 </div>
</div>
<br>
<br>
<br>
<!--1、折叠部分设置一个id
 2、在被点击的连接处引入<a href="#collapseOne" rel="external nofollow" rel="external nofollow" rel="external nofollow"
 3、还是在被点击的连接处加入 date-toggle="collapse"
 4、写完之后第一次不正常，所以需要在折叠部分写上
 class=“collapse”（表示一开始隐藏）或者 “collapse in”（表示一开始展开）
 -->
<!--<div class="panel-group"><!–大容器–> 

 <div class="panel panel-default"><!–这个表示第一个整块儿的–>
 <div class="panel-heading"><!–第一部分，被点击部分–>
  <h4 class="panel-title">
  <a href="#collapseOne" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse">1号连接</a>
  </h4>
 </div>
 <div class="panel-collapse collapse" id="collapseOne"><!–第二部分，折叠部分–>
  <div class="panel-body">
  1号内容
  </div>
 </div>
 </div> 

 <div class="panel panel-default"><!–这个表示第一个整块儿的–>
 <div class="panel-heading"><!–第一部分，被点击部分–>
  <h4 class="panel-title">
  <a href="#collapseTwo" rel="external nofollow" rel="external nofollow" data-toggle="collapse">2号连接</a>
  </h4>
 </div>
 <div class="panel-collapse collapse" id="collapseTwo"><!–第二部分，折叠部分–>
  <div class="panel-body">
  2号内容
  </div>
 </div>
 </div> 

 <div class="panel panel-default"><!–这个表示第一个整块儿的–>
 <div class="panel-heading"><!–第一部分，被点击部分–>
  <h4 class="panel-title">
  <a href="#collapseThree" rel="external nofollow" rel="external nofollow" data-toggle="collapse">3号连接</a>
  </h4>
 </div>
 <div class="panel-collapse collapse" id="collapseThree"><!–第二部分，折叠部分–>
  <div class="panel-body">
  3号内容
  </div>
 </div>
 </div> 

</div>-->
<br>
<br>
<br>
<br>
<!--点击某一展开，其他的都自动折叠
 1、给大容器加一个id id="accordion"
 2、给每一个被点击链接加上一个 data-parent="#accordion"
-->
<div class="panel-group" id="accordion"><!--大容器--> 

 <div class="panel panel-default"><!--这个表示第一个整块儿的-->
 <div class="panel-heading"><!--第一部分，被点击部分-->
  <h4 class="panel-title">
  <a href="#collapseOne" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-parent="#accordion">1号连接</a>
  </h4>
 </div>
 <div class="panel-collapse collapse" id="collapseOne"><!--第二部分，折叠部分-->
  <div class="panel-body">
  1号内容
  </div>
 </div>
 </div> 

 <div class="panel panel-default"><!--这个表示第一个整块儿的-->
 <div class="panel-heading"><!--第一部分，被点击部分-->
  <h4 class="panel-title">
  <a href="#collapseTwo" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-parent="#accordion">2号连接</a>
  </h4>
 </div>
 <div class="panel-collapse collapse" id="collapseTwo"><!--第二部分，折叠部分-->
  <div class="panel-body">
  2号内容
  </div>
 </div>
 </div> 

 <div class="panel panel-default"><!--这个表示第一个整块儿的-->
 <div class="panel-heading"><!--第一部分，被点击部分-->
  <h4 class="panel-title">
  <a href="#collapseThree" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-parent="#accordion">3号连接</a>
  </h4>
 </div>
 <div class="panel-collapse collapse" id="collapseThree"><!--第二部分，折叠部分-->
  <div class="panel-body">
  3号内容
  </div>
 </div>
 </div> 

</div>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body> 

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Bootstrap每天必学之折叠（Collapse）插件

    Bootstrap每天必学之折叠（Collapse）插件

    折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js,或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 下表列出了折叠(Collapse)插件用于处理繁重的伸缩的 class: 您可以通过以下两种方式使用折叠(Collapse)插件: 通过 data 属性:

  • bootstrap手风琴制作方法详解

    手风琴(Collapse)效果展示 Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果.点击标题,可以让其对应的内容显示或隐藏 <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class=

  • Angular.js与Bootstrap相结合实现手风琴菜单代码

    Angular.js与Bootstrap相结合实现手风琴菜单代码

    标题定的是angularjs与bootstrap相结合实现手风琴菜单,其实也就是用的bootstrap的样式. 在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码.接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先上效果图: <my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page

  • Bootstrap创建可折叠的组件

    本文将学习如何通过Bootstrap创建可折叠的组件,具体内容如下 什么是必需的 您必须引用 jquery.js 和 bootstrap-collapse.js - 这两个 JavaScript 文件都位于 docs/assets/js 文件夹内. 您可以在不编写大量 JavaScript 或者不调用 JavaScript 的情况下创建可折叠的组件. 实例 第一个实例演示如何不调用 JavaScript 创建可折叠的组件. <!DOCTYPE html> <html> <he

  • Bootstrap基本插件学习笔记之折叠(22)

    Bootstrap基本插件学习笔记之折叠(22)

    折叠(Collapse)插件可以很容易地让页面区域折叠起来. 0x01 例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link hr

  • 简洁实用的BootStrap jQuery手风琴插件

    简洁实用的BootStrap jQuery手风琴插件

    前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-s

  • Bootstrap 手风琴菜单的实现代码

    好了,废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <link rel="stylesheet" href="css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件(一般不用引入

  • bootstrap折叠调用collapse()后data-parent不生效的快速解决办法

    今天做的项目,用到了bootstrap的折叠功能,这个功能需要只展开一个折叠框,点击一个就会自动隐藏另一个,初始按照API做了一下,发现一切运行正常,但是测试的同事提了一个bug,说切换到其他模块后再切换回来,发现原先展开的折叠框没有折叠起来--即恢复原样.于是又去修改代码,回来的时候对所有折叠框调用: .collapse('hide')方法. $(".love .collapse").collapse('hide'); 调用之后发现,点击连接苗,data-parent失效了,也就是可

  • Bootstrap每天必学之折叠

    Bootstrap每天必学之折叠

    本文主要来学习一下JavaScript插件--折叠. 1.过渡效果 关于过渡效果 对于简单的过渡效果,只需将transition.js和其它JS文件一起引入即可.如果你使用的是编译(或压缩)好的bootstrap.js文件,就无需再单独将其引入了. What's inside Transition.js是针对 is a basic helper for transitionEnd事件的一个基本助手工具,也是对CSS过渡效果的模拟.它被其它插件用来检测当前浏览器对CSS过渡效果是否支持. 2.折叠

  • 全面解析Bootstrap手风琴效果

    全面解析Bootstrap手风琴效果

    触发手风琴可以通过自定义的data-toggle 属性来触发.其中data-toggle值设置为 collapse,data-target="#折叠区标识符". 第一步,设计一个面板组合,里面有三个折叠区: <div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"></di

随机推荐