代码：

<!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. 假期（MySQL相关）

    """ 一.初始数据库: - 数据库管理软件的由来 四个字:存储数据(简单暴力) - 数据库概述 :什么是数据:简单的说就是描述事物的记录称为数据:可以是数字,文字,图片 ...

  2. linux命令：find命令

    http://blog.csdn.net/pipisorry/article/details/39831419 linux find命令语法 find [起始文件夹] 寻找条件 操作 find PAT ...

  3. JAVA设计模式之：訪问者模式

    訪问者模式: 一个作用于某对象结构中各元素的操作,使你能够在不改变各元素类数据结构的前提下添加作用于这些元素的新操作. 结构对象是訪问者模式必备条件.且这个结构对象必须存在遍历自身各个对象的方法. 适 ...

  4. oc72--NSArray排序

    // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject @property (nonatomi ...

  5. oc67--NSString1

    // // main.m // NSString基本概念 // Foundation框架,苹果有80多个框架,Foundation有125个头文件. #import <Foundation/Fo ...

  6. 转 linux/unix学习经典书籍

    都是一些链接. 1. Linux网络编程经典书籍推荐 http://blog.csdn.net/zhangpeng_linux/article/details/7001970 2. C语言经典著作导读 ...

  7. [python基础] csv.wirterow()报错UnicodeEncodeError

    python在安装时,默认的编码是ascii,当程序中出现非ascii编码时,python的处理常常会报这样的错,python没办法处理非ascii编码的,此时需要自己设置将python的默认编码,一 ...

  8. eclipse和jdk版本对应问题

    日常开发中,32位eclipse要用32位jdk,64位则必须要用64位jdk,否则启动时就会报错,load jvm.dll失败,昨天又遇到了这个问题.更换对应的版本之后就好了.tomcat等应用也有 ...

  9. bzoj4403 序列统计——组合数学

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4403 一开始想了个 O(n) 的做法,不行啊... O(n)想法是这样的:先考虑递推,设 f ...

  10. 转载：C语言的字节对齐及#pragma pack的使用

    C语言的字节对齐及#pragma pack的使用   C编译器的缺省字节对齐方式(自然对界) 在缺省情况下,C编译器为每一个变量或是数据单元按其自然对界条件分配空间. 在结构中,编译器为结构的每个成员 ...