代码：

<!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. C++之内部类（内部类就是外部类的友元类，单向友元。只是内部类比友元类多了一点权限）

    1. 内部类的概念 如果一个类定义在另一个类的内部,这个内部类就叫做内部类.注意此时这个内部类是一个独立的类,它不属于外部类,更不能通过外部类的对象去调用内部类.外部类对内部类没有任何优越的访问权限. ...

  2. javascript的鼠标事件---基础

  3. memcache缓存系统

    一.缓存系统 静态web页面: 1.在静态Web程序中,客户端使用Web浏览器(IE.FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Request),告诉服 ...

  4. Java根据年度将数据分组

    现在有这么一组数据 code                   name                year 45615654           x1                      ...

  5. $luogu2375[NOI2014]$

    \(problem\) 其中,\(next[i],next[next[i]],next[next[next[i]]]......\)都是这个前缀串i的公共前后缀,而且只有它们是公共前后缀 那么,我们其 ...

  6. python网络爬虫数据中的三种数据解析方式

    一.正则解析 常用正则表达式回顾: 单字符: . : 除换行以外所有字符 [] :[aoe] [a-w] 匹配集合中任意一个字符 \d :数字 [0-9] \D : 非数字 \w :数字.字母.下划线 ...

  7. Java常用类库(三) : HashSet和LinkedList特点简析

    今天内容: l  浅撩HashSet集合元素不可重复的原理 l  使用LinkedList模拟栈和队列 1.浅撩HashSet集合元素不可重复的原理 我们知道HashSet是添加不了相同的元素的,其原 ...

  8. ubuntu上Hadoop三种运行模式的部署

    Hadoop集群支持三种运行模式:单机模式.伪分布式模式,全分布式模式,下面介绍下在Ubuntu下的部署 (1)单机模式 默认情况下,Hadoop被配置成一个以非分布式模式运行的独立JAVA进程,适合 ...

  9. webstorm进行VisualSVN配置及上传项目到项目库

    以前建站一直都是自己一个人,最近要做一个比较大的网站,寻思着利用svn在整个开发过程中会比较快,于是摸索着配置了一下. 首先,下载VisualSVN这个软件,官网链接 https://www.visu ...

  10. FTP工作原理

    FTP工作原理 FTP两种传输方式:1.ASCII传输2.二进制传输 FTP主被动原理: 主动方式:1.用户与服务器建立控制通道2.客户端发出PORT指令,主动告诉服务器端口号3.服务器主动通过20端 ...