bootstrap的折叠窗口(手风琴切换卡)

2.3版本 3版本
.accordion .panel-group
.accordion-group .panel .panel-default
.accordion-heading .panel-heading
.accordion-body .panel-collapse
.accordion-inner .panel-body

以3版本为例,代码实例:


<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 折叠面板title>
    <link rel="stylesheet" href="......./bootstrap.min.css">
    <script src="........./jquery.min.js">script>
    <script src="..../bootstrap.min.js">script>
head>
<body>
   <div class="panel-group" id="accordion">
     <div class="panel panel-default">
        <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion"                                                       href="#collapseOne">点击我进行展开,再次点击我进行折叠。第 1 部分
        a>
      h4>
    div>
    <div id="collapseOne" class="panel-collapse collapse in">
       <div class="panel-body">内容1div>
    div>
      div>
      <div class="panel panel-default">
    <div class="panel-heading">
       <h4 class="panel-title">
         <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseTwo">点击我进行展开,再次点击我进行折叠。第 2 部分
         a>
            h4>
    div>
        <div id="collapseTwo" class="panel-collapse collapse">
       <div class="panel-body">内容2div>
    div>
      div>
      <div class="panel panel-default">
    <div class="panel-heading">
       <h4 class="panel-title">
         <a data-toggle="collapse" data-parent="#accordion" 
          href="#collapseThree">点击我进行展开,再次点击我进行折叠。第 3 部分
         a>
        h4>
    div>
    <div id="collapseThree" class="panel-collapse collapse">
       <div class="panel-body">内容3div>
    div>
    div>
div>
body>
html>
效果展示: Bootstrap 实例 - 折叠面板

点击我进行展开,再次点击我进行折叠。第 1 部分

内容1

点击我进行展开,再次点击我进行折叠。第 2 部分

内容2

点击我进行展开,再次点击我进行折叠。第 3 部分

内容3


注意:

  • 控制面板内容区是否可视。在Bootstrap框架中,如果想让内容区域不可视,只需要在 panel-collapse 样式上添加 collapse,每个面板的内容区都被隐藏起来了;若希望默认第一个面板内容是可视的,只需要在collapse基础上再追加 in 样式。简而言之,装载内容的div的父级div如果含有类in,则该内容的初始状态为打开。

  • 定义data-parent属性,实现点击一个其中一个元素时,关闭所有的折叠区,再打开所单击的区域(如果所单击区域是展示的,则会关闭)。

  • bootstrap实现折叠面板功能,以上两个版本均可,可相互替换,又略有不同,详细介绍可参考bootstrap官网。

  • 若内容的打开与关闭由button按钮控制,情况又会略有不同,详情不多介绍啦。

bootstrap的折叠窗口(手风琴切换卡)_第1张图片

2017/00/00

你可能感兴趣的:(转岗前的前端开发)