<div class="container">

        <!--该button可以控制div是否显示

            1、首先给button设置data-toggle="collapse"属性

            2、data-target="#demo"用来指定被控制的元素

            3、class="collapse" 默认显示

            4、class="collapse in" 默认隐藏

        -->

        <button class="btn" data-toggle="collapse" data-target="#demo">折叠</button>

        <div id="demo" class="well collapse in">被控制是否显示的div</div>

    </div>
div class="container">

        <div class="row">

            <!--

                有折叠功能的菜单栏

                1、所有的菜单都放在panel-group中

                2、panel panel-default为一级菜单

                3、如何有多个以及菜单则添加多个panel panel-default

            -->

            <div class="panel-group">

                <div class="panel panel-default">

                    <div class="panel-heading">

                        <h4 class="panel-title">

                            <a href="#" data-toggle="collapse" data-target="#demo1">栏目管理</a></h4>

                    </div>

                    <div class="panel-collapse collapse" id="demo1">

                        <div class="panel-body">

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

想实现当某个菜单打开，其他菜单折叠的效果

只需要给

1、class="panel-group" 的div设置一个id

2、将<a href="#" data-toggle="collapse" data-target="#demo1">栏目管理</a></h4> 的data-parent的id设置为第一个设置的id即可

<div class="panel-group" id="haha">

                <div class="panel panel-default">

                    <div class="panel-heading">

                        <h4 class="panel-title">

                            <a href="#" data-toggle="collapse" data-target="#demo1" data-parent="#haha">栏目管理</a></h4>

                    </div>

                    <div class="panel-collapse collapse" id="demo1">

                        <div class="panel-body">

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                        </div>

                    </div>

                </div>

                <div class="panel panel-default">

                    <div class="panel-heading">

                        <h4 class="panel-title">

                            <a href="#" data-toggle="collapse" data-target="#demo2" data-parent="#haha">用户</a></h4>

                    </div>

                    <div class="panel-collapse collapse" id="demo2">

                        <div class="panel-body">

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                        </div>

                    </div>

                </div>

                <div class="panel panel-default">

                    <div class="panel-heading">

                        <h4 class="panel-title">

                            <a href="#" data-toggle="collapse" data-target="#demo3">用户</a></h4>

                    </div>

                    <div class="panel-collapse collapse" id="demo23">

                        <div class="panel-body">

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                            <a href="#">栏目管理1</a>

                        </div>

                    </div>

                </div>

            </div>

最终的折叠菜单栏效果

<div class="panel-group" id="haha1">

                <div class="panel panel-default">

                    <div class="panel-heading">

                        <h4 class="panel-title">

                            <a href="#" data-toggle="collapse" data-target="#demo4" data-parent="#haha1">栏目管理</a></h4>

                    </div>

                    <div class="panel-collapse collapse" id="demo4">

                        <ul class="list-group">

                            <li class="list-group-item" ><a href="#">栏目管理1</a></li>

                            <li class="list-group-item" ><a href="#">栏目管理1</a></li>

                            <li class="list-group-item" ><a href="#">栏目管理1</a></li>

                        </ul>

                    </div>

                </div>

            </div>
 

bootstrap之collapse的更多相关文章

  1. [Bootstrap] 8. 'Collapse', data-target, data-toggle & data-parent

    Using Bootstrap JavaScript Plugins If we want to add behavior to our website, which of the following ...

  2. Bootstrap 折叠(collapse) 初见

    以下代码来自bootstrap中文网 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...

  3. Bootstrap 的 Collapse

    一.简介 Collapse 插件为 HTML 标签提供折叠.展开行为,依赖 transition.js(bootstrap.js 文件中已包含). 二.实现机制 实现 Collapse 效果需要: 一 ...

  4. Bootstrap插件-collapse

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  5. Bootstrap 折叠(collapse)插件面板

    折叠插件(collapse)可以很容易地让页面区域折叠起来, 无论您是用它来创建折叠导航还是内容面板,它都允许很多内容选项. 您可以使用折叠插件 1.创建可折叠的分组或折叠的面板 <!DOCTY ...

  6. 基于BootStrap的Collapse折叠(包含回显展开折叠的对应状态)

    情况描述:为了改善页面上的input框太多,采用∧∨折叠展开,这个小东西来控制,第一次做,记录一下ヾ(◍°∇°◍)ﾉﾞ下边是Code 代码: //html代码 <div id="col ...

  7. bootstrap 折叠collapse失效

    手动点击折叠,然后调用折叠全部以后,在手动点击折叠项,折叠失效. 方法,折叠项是通过添加或删除".in"来实现,实现如下 $(".collapse.in").c ...

  8. Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel

    类似Page Header, Breadcrumbs, Dropdowns等,都是Bootstrap的组件,是静态的.如果涉及到交互,Bootstrap提供了插件.这些插件包括: ○ 过渡效果: bo ...

  9. 第二百五十节，Bootstrap项目实战--响应式导航

    Bootstrap项目实战--响应式导航 学习要点: 1.响应式导航 一．响应式导航 基本导航组件+响应式 第一步,声明导航区域,设置导航默认样式,设置导航条固定在顶部navbar样式class类,写 ...

随机推荐

  1. Guava 工具类之Cache的使用

    一.guava cache 介绍 1.介绍 guava cache是Google guava中提供的一款轻量级的本地缓存组件,其特点是简单.轻便.完善.扩展性强,内存管理机制也相对完善. 2.使用缓存 ...

  2. linux服务器搭建lnmp php 微擎环境备用

    以前的时候装个php环境各种的配置麻烦啊,于是乎我就像搜搜一键安装php环境,果然 lamp 和phpstudy 两个环境软件都支持,最后发现lamp 还合胃口就选择了lamp https://lnm ...

  3. 过滤器( filter )的使用

    转自:https://www.jianshu.com/p/2ea2b0e4d1f2 过滤器通常 在 web 服务端用的比较多,有要功能 在客户端的请求访问后端资源之前,拦截这些请求. 在服务器的响应发 ...

  4. SpringBoot中使用@Scheduled创建定时任务

    SpringBoot中使用@Scheduled创建定时任务 定时任务一般会在很多项目中都会用到,我们往往会间隔性的的去完成某些特定任务来减少服务器和数据库的压力.比较常见的就是金融服务系统推送回调,一 ...

  5. BJFU-207-基于顺序存储结构的图书信息表的逆序存储

    #include<stdio.h> #include<stdlib.h> #define MAX 1000 typedef struct{ double no; char na ...

  6. PyCharm:设置py文件头部信息

    P PyCharm:设置py文件头部信息file->setting->appearance & behavior->editor->file and code temp ...

  7. python第二天---字符串的魔法

    # "adcbdefg" # "a" # 判断某个东西是否在里面包含 in | not in # name = "abcdefg" # # ...

  8. SQL——SELECT（查）

    一.SELECT语句的基本用法 SELECT语句会在数据库中选取数据,存放在一个结果表中. SELECT 语法: SELECT 列名1,列名2... FROM 表名: 先看一下student表: 1. ...

  9. Python学习路线图【转载】

    文章来源:https://blog.csdn.net/u014044812/article/details/88079011

  10. hdu 1501 贪心问题

    这道题目的关键就是逐个搜索的过程 找个时间得复习一下dfs了    这里使用temp作为参照变量 每次比较以后(由于已经排序好) 已temp为参照进行下一次的比较