一、bootstrap实现

1）水平折叠组件

使用panel和collaspe组件

<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/test.css">
    <title>test</title>
</head>
<body>

    <div class="row">
        <div class="blog col-sm-6">
            <div class="panel-group" id="accordion">
              <div class="panel panel-info">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion"
                      href="#collapseOne">
                      bobo&leishao
                      <span class="glyphicon glyphicon-chevron-right pull-right"></span>
                    </a>
                  </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                  <div class="panel-body">
                    Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                    vice lomo.
                  </div>
                </div>
              </div>

              <div class="panel panel-info">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion"
                      href="#collapseTwo">
                      bobo一二事
                        <span class="glyphicon glyphicon-chevron-right pull-right"></span>
                    </a>
                  </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                  <div class="panel-body">
                    Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                    vice lomo.
                  </div>
                </div>
              </div>

              <div class="panel panel-info">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion"
                      href="#collapseThree">
                      磊少一二事
                        <span class="glyphicon glyphicon-chevron-right pull-right"></span>
                    </a>
                  </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse">
                  <div class="panel-body">
                    Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                    vice lomo.
                  </div>
                </div>
              </div>
            </div>
        </div>

    </div>

    <script src="lib/jquery-2.1.4.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js">
    <script src="js/test.js"></script>
</div>

</body>

bootstrap实现书评折叠组件

/*blog accordion*/
.blog{
    margin-top:50px;
}
.blog .panel{
    border-radius:;
}
.blog .panel-heading{
    border-radius:;
}
.blog .panel-group .panel+.panel{
    margin-top:;
}
.blog  .panel-heading a{
    display:block;
}
.blog .panel-heading span.glyphicon{
    width:45px;
    line-height:38px;
    font-size:20px;
    margin-top:-13px;
    text-align:center;
    margin-right:-16px;
    background-color:#ccc;
    border-top:2px solid transparent;
}

水平折叠组件的css代码（去除bootstrap默认样式）

2）左右布局可响应的折叠组件（屏幕小时上下布局，屏幕大时导航栏位于内容的左边）

使用bootstrap中的导航元素nav-tabs与collaspe的组合,切换利用data属性，需要自己覆盖掉bootstrap的默认样式

<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/test.css">
    <title>test</title>
</head>
<body> 

    <h2>垂直的响应式导航</h2>
    <div class="media">
        <div class="pull-left">
            <ul class="nav nav-tabs nav-stacked">
                <li class="active"><a href="#tab1" data-toggle="tab">Responsive Web Design</a></li>
                <li><a href="#tab2" data-toggle="tab">Predefine Layout</a></li>
                <li><a href="#tab3" data-toggle="tab">Our Philosopy</a></li>
                <li><a href="#tab4" data-toggle="tab">What We do?</a></li>
            </ul>
        </div>
        <div class="tab-wrapper media-body">
            <div id="tabContent" class="tab-content">
                <div class="tab-pane fade in active" id="tab1">
                    <h4>Tab1</h4>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
                </div>
                <div class="tab-pane fade" id="tab2">
                    <h4>Tab2</h4>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
                </div>
                <div class="tab-pane fade " id="tab3">
                    <h4>Tab3</h4>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
                </div>
                <div class="tab-pane fade " id="tab4">
                    <h4>Tab4</h4>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
                </div>
            </div>
        </div>

    </div>

    <script src="lib/jquery-2.1.4.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="js/test.js"></script>
</div>

</body>

左右垂直布局（html代码）

.nav-tabs>li{
    border-bottom:1px solid #e6e6e6;
}
.nav-tabs{

    border-right:1px solid #e6e6e6;
}
.nav-tabs>li>a{
    background-color:#f5f5f5;
    color:#;
    border-radius:;
    border: none;
    margin-right:;
    padding: 13px 15px;
    line-height:24px;

}
.nav-tabs li:last-child{
    border-bottom: none;
}
.nav-stacked>li+li{
    margin-top:;
}
.nav-tabs>li>a:hover{
  background: #1f1f20;
  color:#fff;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  border: ;
  color:#fff;
  background: #1f1f20;
  position: relative;
}
.nav-tabs>li.active>a:after{
  position: absolute;
  content:  "";
  width: auto;
  height: auto;
  border-style:solid;
  border-color: transparent transparent transparent pink;
  border-width: 25px 22px;
  /*恰好是两个左右边界的宽度*/
  right: -44px;
  top:;
}
.tab-wrapper{
    border:1px solid #e6e6e6;
    margin-bottom:20px;
}
.tab-content{
    padding:20px;
}

左右垂直布局（css代码）

二、jquery实现

1）水平折叠实现

<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="css/test.css">
    <title>test</title>
</head>
<body>

    <div class="panel-group" id="accordion">
      <div class="panel">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a  href="#collapseOne">
              bobo&leishao
              <span class="glyphicon glyphicon-chevron-right pull-right"></span>
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="collapse">
          <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
            vice lomo.
          </div>
        </div>
      </div>

          <div class="panel-group" id="accordion">
      <div class="panel">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a  href="#collapseOne">
              bobo&leishao2
              <span class="glyphicon glyphicon-chevron-right pull-right"></span>
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="collapse">
          <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
            vice lomo.
          </div>
        </div>
      </div>

            <div class="panel-group" id="accordion">
      <div class="panel">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a  href="#collapseOne">
              bobo&leishao3
              <span class="glyphicon glyphicon-chevron-right pull-right"></span>
            </a>
          </h4>
        </div>
        <div id="collapseOne" class="collapse">
          <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
            vice lomo.
          </div>
        </div>
      </div>

    <script src="lib/jquery-2.1.4.min.js"></script>

    <script src="js/test.js"></script>
</div>

</body>

水平折叠jquery实现（html代码）

.panel-heading a{
    display:block;
    text-decoration:none;
    border-bottom:1px solid pink;
    height:24px;
    line-height:24px;
}

水平折叠jquery实现(css代码)

$(function(){
    $(".panel-heading").click(function(){        

        $(this).parents(".panel-group").find(".collapse").hide();
        $(this).siblings(".collapse").show();
        //$(this).next().show();
    });

})

水平折叠jquery实现(jquery代码)

2）左右垂直导航折叠的实现

<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="css/test.css">
    <title>test</title>
</head>
<body> 

    <h2>垂直的响应式导航</h2>
    <div class="accordion">
        <div class="nav-wrapper">
            <ul class="nav-tabs">
                <li class="active"><a href="#tab1" >Responsive Web Design</a></li>
                <li><a href="#tab2"  >Predefine Layout</a></li>
                <li><a href="#tab3"  >Our Philosopy</a></li>
                <li><a href="#tab4"  >What We do?</a></li>
            </ul>
        </div>
        <div class="content-wrapper">
            <div id="tabContent" >
                <div class="tab-pane" id="tab1">
                    <h4>Tab1</h4>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
                </div>
                <div class="tab-pane" id="tab2">
                    <h4>Tab2</h4>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
                </div>
                <div class="tab-pane" id="tab3">
                    <h4>Tab3</h4>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
                </div>
                <div class="tab-pane" id="tab4">
                    <h4>Tab4</h4>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
                </div>
            </div>
        </div>

    </div>

    <script src="lib/jquery-2.1.4.min.js"></script>

    <script src="js/test.js"></script>
</div>

</body>

左右垂直导航折叠实现（html代码）

ul.nav-tabs{
    list-style:none;
    margin:;
    padding:;
    border:1px solid #;
    float:left;
    margin-right:10px;
}
ul.nav-tabs li{
    border-bottom:1px solid #e6e6e6;
}
ul.nav-tabs>li>a{
    display:block;
    text-decoration:none;
    line-height:50px;
    height:50px;
    padding:18px;
}
.active{
    background:#ccc;
}
ul.nav-tabs>li>a:hover{
    background:#ccc;
}

左右垂直导航折叠实现(css代码)

$(function(){

    $("ul.nav-tabs>li").click(function(){
        //alert("start");
        $(this).toggleClass("active").siblings().removeClass("active");
        var div_id=$(this).find("a").attr("href");
        $(div_id+".tab-pane").show().siblings().hide();
    });
})

左右垂直导航折叠实现（jquery代码）

综述：

很多框架功能其实用原生jquery或者js也并不复杂，要根据需求灵活选择

前端实战——前端效果accordition的实现的更多相关文章

  1. .NET-架构优化实战-前端优化

    原文:.NET-架构优化实战-前端优化 前言 上一篇<.NET-架构优化实战-梳理篇>整理了基本的业务知识,同时也罗列了存在的问题,本篇主要是针对任务列表的页面进行性能优化. 该篇主要涉及 ...

  2. Web 前端实战：Gitee 贡献图

    前言 这次要做的 Web 前端实战是一个 Gitee 个人主页下的贡献图(在线 Demo),偶尔做一两个,熟悉熟悉 JS 以及 jQ.整体来说这个案例并不难,主要是控制第一个节点以及最后一个节点处于星 ...

  3. vue前端实战注意事项

    1. vue前端实战注意事项 1.1. 预备 1.1.1. Eslint 这是个语法检查工具,我用webstorm作为开发的ide,这个语法检查还是太严格了,一个空格啥的都会报错,对新手来讲还是建议关 ...

  4. Web前端 Web前端和Web后端的区分

    一.绪论 1. 前台:呈现给用户的视觉和基本的操作. 后台:用户浏览网页时,我们看不见的后台数据跑动.后台包括前端.后端. 前端:对应我们写的html.css.javascript 等网页语言作用在前 ...

  5. web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 规范 HTML结构详解 {前端之前端初识}

    前端之前端初识   前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...

  6. 好程序员web前端分享前端学习路线自学如何找到工作

    好程序员web前端分享前端学习路线自学如何找到工作,自学能不能学会WEB前端并且找到WEB前端开发岗位的工作取决于自身条件,如果基础好,自律性强那么将会容易很多,还有就是自学最难克服的并不是知识点,而 ...

  7. day 41 前端之前端初识

    前端之前端初识   前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...

  8. JQuery实战---窗口效果

    在前面的相关博文中,小编对jquery的相关知识进行了简单的总结,关于jquery的很多小的知识点,都需要我们自己去动手和实践,一行行代码都需要我们自己亲自动手去敲,今天我们继续来学习jquery的相 ...

  9. 后端把Long类型的数据传给前端，前端可能会出现精度丢失的情况，以及解决方案

    后端把Long类型的数据传给前端,前端可能会出现精度丢失的情况.例如:201511200001725439这样一个Long类型的整数,传给前端后会变成201511200001725440. 解决方法: ...

随机推荐

  1. HDU 2181 哈密顿绕行世界问题（经典DFS+回溯）

    哈密顿绕行世界问题 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  2. metasploit-post模块信息

    Name                                             Disclosure Date  Rank    Description ----           ...

  3. JavaScript系列：再巩固-原型链

    图 1.实例:'对象(实例)'有属性__proto__,指向该对象(实例)的'构造函数的原型对象'. 2.方法:'构造函数'除了有属性__proto__,所有构造函数方法的__proto__指向Fun ...

  4. oracle imp导入库到指定表空间

    1.创建表空间 create tablespace example_tablespace datafile 'e:\****.dbf' size 10m reuse autoextend on nex ...

  5. StringUtils cannot be resolved

    I am using Java server pages and for using String Manipulations and i am Using StringUtils which i a ...

  6. 【IOS笔记】About Events in iOS

    About Events in iOS Users manipulate their iOS devices in a number of ways, such as touching the scr ...

  7. Bootstrap页面布局5 - 响应式布局(格式)

    旨在优化不同上网设备中页面显示的优化 响应式布局:就是根据浏览窗口的尺寸,改变页面的变化 原理:利用css的media-queries判断浏览窗口的尺寸,在CSS样式表中设置一些规则! 例如: 在&l ...

  8. php 文件和表单内容一起上传

    <?php $filename = $_POST['filename']; $explain = $_POST['explain']; $upfile = $_FILES['upfile']; ...

  9. 【故障处理】ORA-12162: TNS:net service name is incorrectly specified （转）

    本文将给大家阐述一个因未设置系统环境变量ORACLE_SID导致ORA-12162错误的案例.希望大家有所思考. 1.获得有关ORA-12162报错信息的通用表述信息 [oracle@asdlabdb ...

  10. 接口测试从未如此简单 - Postman (Chrome插件)【转】

    一个非常有力的Http Client工具用来测试Web服务的, 我这里来介绍如何用它测试restful web service 注:转载请注明出处http://www.cnblogs.com/wade ...