代码：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://blog-static.cnblogs.com/files/believepd/bootstrap.min.css">

</head>

<body>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

    <div class="panel panel-default">

        <div class="panel-heading" role="tab" id="headingOne">

            <h4 class="panel-title">

                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"

                   aria-expanded="true" aria-controls="collapseOne">

                    菜单1

                </a>

            </h4>

        </div>

        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

            <div class="panel-body">

                <p><button>宫爆鸡丁</button></p>

                <p><button>宫爆鸡丁</button></p>

                <p><button>宫爆鸡丁</button></p>

            </div>

        </div>

    </div>

    <div class="panel panel-default">

        <div class="panel-heading" role="tab" id="headingTwo">

            <h4 class="panel-title">

                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"

                   aria-expanded="false" aria-controls="collapseTwo">

                    菜单2

                </a>

            </h4>

        </div>

        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

            <div class="panel-body">

                <p><button>宫爆鸡丁</button></p>

                <p><button>宫爆鸡丁</button></p>

                <p><button>宫爆鸡丁</button></p>

            </div>

        </div>

    </div>

    <div class="panel panel-default">

        <div class="panel-heading" role="tab" id="headingThree">

            <h4 class="panel-title">

                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"

                   aria-expanded="false" aria-controls="collapseThree">

                    菜单3

                </a>

            </h4>

        </div>

        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">

            <div class="panel-body">

                <p><button>宫爆鸡丁</button></p>

                <p><button>宫爆鸡丁</button></p>

                <p><button>宫爆鸡丁</button></p>

            </div>

        </div>

    </div>

</div>

<script type="text/javascript" src="https://blog-static.cnblogs.com/files/believepd/jquery-3.3.1.min.js"></script>

<script type="text/javascript" src="https://blog-static.cnblogs.com/files/believepd/bootstrap.min.js"></script>

</body>

</html>

效果：

Bootstrap练习：可折叠下拉菜单的更多相关文章

  1. Bootstrap系列 -- 24. 下拉菜单基本用法

    在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文 ...

  2. 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 (转)

    实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 问题描述,在下拉菜单中,添加其他元素,例如,原文作者所述的<a>和我自己实际用到的<input> ...

  3. Bootstrap系列 -- 27. 下拉菜单对齐方式

    Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right ...

  4. Bootstrap系列 -- 26. 下拉菜单标题

    Bootstrap下拉菜单中使用 dropdown-header 来显示菜单标题,和上一篇说道的分割线一样 <div class="dropdown"> <but ...

  5. Bootstrap系列 -- 25. 下拉菜单分割线

    在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“divider”来实现添加 ...

  6. 【Bootstrap】 bootstrap-select2下拉菜单插件

    这次开发了个小TRS系统,虽然是很小,但是作为初心者,第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件.包括bootstrap-select2,boot ...

  7. bootstrap：导航下拉菜单

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  8. Bootstrap系列 -- 28. 下拉菜单状态

    下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus). 下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled).这两种状态使用方法 ...

  9. bootstrap中的下拉菜单

    下拉菜单必要的代码: <div  class="container"> <div  class="dropdown"> <butt ...

  10. 8.bootstrap单按钮下拉菜单

    1. 2. (1)首先是两个按钮,因此需要<div class="btn-group">加上"btn-group". (2)要将下拉菜单与按钮联系在 ...

随机推荐

  1. BZOJ 2338 HNOI2011 数矩形 计算几何

    题目大意:给定n个点,求一个最大的矩形,该矩形的四个顶点在给定的点上 找矩形的方法是记录全部线段 若两条线段长度相等且中点重合 这两条线段就能够成为矩形的对角线 于是我们找到全部n*(n-1)/2条线 ...

  2. 双logo

    from aip import AipSpeech bd_k_l = ['11059852', '5Kk01GtG2fjCwpzEkwdn0mjw', 'bp6Wyx377Elq7RsCQZzTBgG ...

  3. WIZnet的网络产品怎样选型

    文章来源:成都浩然 我们在选用WIZnet的网络产品的时候.面对诸多的器件不知怎样选择,这里介绍一些方法以帮助project师高速准确地选择产品. WIZnet的产品有一个共同的特性.那就硬件TCPI ...

  4. c++中读写文件操作

    读写文件这个,不常用,每次用的时候都会百度一下,每次写法还都不一样,所有总是记混.今天利用点时间总结下之前工程中用过的.以后就安照这种方法写了. 搞acmicpc的时候喜欢用freopen(),这个是 ...

  5. poj1611 并查集 (路径压缩)

    http://poj.org/problem?id=1611 题目大意: 有一个学校,有N个学生,编号为0-N-1,现在0号学生感染了非典,凡是和0在一个社团的人就会感染,并且这些人如果还参加了别的社 ...

  6. AngularJS过滤器filter-保留小数-渲染页面-小数点-$filter

    AngularJS      保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...

  7. 对于民科吧s5_or吧友自增树的复杂度计算

    原帖 自增树如s5_or所说,是一种思想像Splay的数据结构,每个节点维护一个堆权值,每当询问一个节点时,堆权值++,并返回时维护堆权值为堆的性质.这个树从旋转次数上比Splay小是肯定的,因为Sp ...

  8. Hadoop Hive概念学习系列之hive里如何显示当前数据库及传参（十九）

    这个小知识点,看似简单,用处极大. $ hive --hiveconf hive.cli.print.current.db=true $ hive --hiveconf hive.cli.print. ...

  9. [转]发布基于T4模板引擎的代码生成器[Kalman Studio]

    本文转自:http://www.cnblogs.com/lingyun_k/archive/2010/05/08/1730771.html 自己空闲时间写的一个代码生成器,基于T4模板引擎的,也不仅是 ...

  10. layer实现在前台删除前确认弹出框，并回调后台删除事件

    最近遇到一些问题,用layer提示消息框,比如删除时,提示消息确定后 return false时,则不管用了,因为layer不支持阻塞,下面就解决一下这个问题:(本文使用Xcode,如要学习,请复下面 ...