Bootstrap 手风琴菜单的实现代码


Posted in Javascript onJanuary 20, 2017

好了,废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="UTF-8"> 
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div style="width: 200px;">
      <div class="panel-group" id="accordion2">
      <div class="panel-heading">
        <strong style="font-size: 30px;">论坛分类</strong>
      </div>
        <div class="panel panel-default">
          <div class="panel-heading" data-toggle="collapse"
            data-parent="#accordion2" href="#collapseOne">
            <a class="accordion-toggle">Java</a>
          </div>
          <div id="collapseOne" class="panel-collapse collapse"
            style="height: 0px;">
            <div class="panel-body">
              <ul class="nav nav-pills nav-stacked">
                <li><a href="#">Java基础</a></li>
                <li><a href="#">Java面向对象</a></li>
                <li><a href="#">Java核心API</a></li>
                <li><a href="#">JavaEE</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" data-toggle="collapse"
            data-parent="#accordion2" href="#collapseTwo">
            <a class="accordion-toggle">数据库</a>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse"
            style="height: 0px;">
            <div class="panel-body">
              <ul class="nav nav-pills nav-stacked">
                <li><a href="#">SQL基础</a></li>
                <li><a href="#">Oracle</a></li>
                <li><a href="#">MySQL</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading" data-toggle="collapse"
            data-parent="#accordion2" href="#collapseThree">
            <a class="accordion-toggle">技术前沿</a>
          </div>
          <div id="collapseThree" class="panel-collapse in"
            style="height: 0px;">
            <div class="panel-body">
              <ul class="nav nav-pills nav-stacked">
                <li><a href="#">NoSQL</a></li>
                <li><a href="#">Hadoop</a></li>
                <li><a href="#">WebService</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

以上所述是小编给大家介绍的Bootstrap 手风琴菜单的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript之更有效率的字符串替换
Aug 02 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
使用AOP改善javascript代码
May 01 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
浅谈angularjs $http提交数据探索
Jan 20 #Javascript
原生js实现无限循环轮播图效果
Jan 20 #Javascript
原生js实现弹出层效果
Jan 20 #Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 #Javascript
原生js实现图片放大缩小计时器效果
Jan 20 #Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 #Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 #Javascript
You might like
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
Angular 表单控件示例代码
2017/06/26 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
基于Python的PIL库学习详解
2019/05/10 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
文员个人求职自荐信
2013/09/21 职场文书
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
环保宣传标语
2014/06/12 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
简易离婚协议书范本
2014/10/24 职场文书
运动会100米加油稿
2015/07/21 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers