代码：

<!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. Bitmap通过getWidth和getHeight获取尺寸不符

    在使用BitmapFactory载入图片时,常会出现这样的情况,返回的图片尺寸与实际尺寸不符.这是因为我们把图片资源放到res/drawable文件路径下时,选择的文件不同所致.不同的目录会有不同的缩 ...

  2. Tiny4412 开发板 编译环境搭建【转】

    本文转载自:http://blog.csdn.net/beijiwei/article/details/51055369 版权声明:本文为博主原创文章,未经博主允许不得转载. /*********** ...

  3. Bing Maps进阶系列一：初识Bing Maps地图服务

    Bing Maps进阶系列一:初识Bing Maps地图服务 Bing Maps提供了一组WCF的地图服务,使用这些服务我们可以方便的在自己的应用系统里实现地理位置搜索等相关功能.他们分别是地理编码服 ...

  4. P2495 [SDOI2011]消耗战 虚树

    这是我做的第一道虚树题啊,赶脚不错.其实虚树也没什么奇怪的,就是每棵树给你一些点,让你多次查询,但是我不想每次都O(n),所以我们每次针对给的点建一棵虚树,只包含这些点和lca,然后在这棵虚树上进行树 ...

  5. 68. 对Extjs中store的多种操作

    转自:https://www.cnblogs.com/exmyth/archive/2013/05/16/3082045.html 先来个声明,看着不错,贴过来的,没都测试过. Store.getCo ...

  6. 在Struts2中ognl.MethodFailedExceptiond异常的解决办法

    问题描述: 在 Struts2 里面,当页面向服务器提交参数时报ognl.MethodFailedException:和java.lang.NoSuchMethodException:异常 异常信息  ...

  7. Android开发之Thread类分析 （转载）

    转自:http://blog.csdn.net/llping2011/article/details/9706599 在我们Linux系统中创建线程函数为:pthread_create(),在Andr ...

  8. PCB 规则引擎之编辑器(语法着色,错误提示,代码格式化)

    对于一个规则引擎中的脚本代码编辑器是非常关键的,因为UI控件直接使用对象是规则维护者,关系到用户体验,在选用脚本编辑器的功能时除了满足代码的编辑的基本编辑要求外,功能还需要包含;语法着色,错误提示,代 ...

  9. Linux系统的整体目录结构和文件解析

    Linux系统目录结构 使用 ls / 查看系统的文件目录: /:根目录,根目录下一般只存放子目录,不存放文件.在linux系统中所有的文件都挂载该目录下. /bin:命令目录. 存放系统的可执行的二 ...

  10. vue---思维导图

    持续更新啦啦啦啦