代码：

<!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. Linux下的画图软件

    Pinta是一款和windows下的画图相类似打一款画图软件,并且它还包含了一些基本的图像编辑工具. 比如:标尺.图层.操作历史记录.图像调整.渲染效果等等,可以满足对图像处理要求不太高的用户的基本需 ...

  2. 发现所有的字都被加上了 <font> 标签，导致样式全部错乱

    经检查,发现我的浏览器默认打开了翻译软件!!!!!!!

  3. Selenium中配置链接使用FTP服务

    Enable the default report solution Step1: Create a suite listener and add codes into it, please watc ...

  4. open_basedir restriction in effect，解决php引入文件权限问题 lnmp

    1.配置了虚拟域名 vim /usr/local/nginx/conf/vhost/siemens.conf server { listen 80; #listen [::]:80 default_s ...

  5. 二分查找法（binary search）

    二分查找法:一种在有序列表中查找某个值的算法,它每次都将待查找的空间分为两半,在其中一般继续查找. 使用二分查找的前提是:已经排序好的列表.否则,sum对其查找的结果不做保证. 代码实现: // 使用 ...

  6. bzoj4591 [Shoi2015]超能粒子炮·改——组合数学(+求阶乘逆元新姿势)

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4591 这题不是很裸啊(所以我就不会了) 得稍微推导一下,看这个博客好了:https://bl ...

  7. MySQL 1071错误解决办法

    今天在使用mysql时,又遇到了如博文标题所示的问题,以前针对该问题未进行记录,今天特意进行说明存档.         该问题是由键值字段长度过长导致.mysql支持数据库表单一键值的最大长度不能超过 ...

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

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

  9. codeforces——模拟

    805 B. 3-palindrome    http://codeforces.com/problemset/problem/805/B /* 题意字符串中不能有长度为三的回文串,且c数量最少 */ ...

  10. 最大正方形 同luogu1387

    这道题下面这么写就够了(n<=100)暴力,枚举 #include<bits/stdc++.h> #define ULL unsigned long long #define MAX ...