编程 Javascript

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 手风琴菜单的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

33种Javascript 表格排序控件收集

Dec 03 Javascript

[原创]js获取数组任意个不重复的随机数组元素

Mar 15 Javascript

input按钮的事件处理大全

Dec 10 Javascript

jQuery1.5.1 animate方法源码阅读

Apr 05 Javascript

jQuery搜索子元素的方法

Feb 10 Javascript

JavaScript中利用for循环遍历数组

Jan 15 Javascript

three.js实现围绕某物体旋转

Jan 25 Javascript

JS+Canvas绘制动态时钟效果

Nov 10 Javascript

Express本地测试HTTPS的示例代码

Jun 06 Javascript

JavaScript字符串转数字的5种方法及遇到的坑

Jul 16 Javascript

JavaScript中callee和caller的区别与用法实例分析

Jun 28 Javascript

解决VUE 在IE下出现ReferenceError: Promise未定义的问题

Nov 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

syphon 虹吸式咖啡冲泡冲煮倒水的得与失

2021/03/03 冲泡冲煮

输出控制类

2006/10/09 PHP

php 魔术方法使用说明

2009/10/20 PHP

PHP使用正则表达式清除超链接文本

2013/11/12 PHP

thinkPHP通用控制器实现方法示例

2017/11/23 PHP

共享自己写一个框架DreamScript

2007/01/20 Javascript

求解开jscript.encode代码的asp函数

2007/02/28 Javascript

SWFObject Flash js调用类

2008/07/08 Javascript

Jquery练习之表单验证实现代码

2010/12/14 Javascript

javascript与webservice的通信实现代码

2010/12/25 Javascript

jquery实现图片渐变切换兼容ie6/Chrome/Firefox

2013/08/02 Javascript

js(jQuery)获取时间的方法及常用时间类搜集

2013/10/23 Javascript

js 通过html()及text()方法获取并设置p标签的显示值

2014/05/14 Javascript

js中的getAttribute方法使用示例

2014/08/01 Javascript

Javascript中String的常用方法实例分析

2015/06/13 Javascript

javascript记住用户名和登录密码（两种方式）

2015/08/04 Javascript

javascript实现拖放效果

2015/12/16 Javascript

前端微信支付js代码

2016/07/25 Javascript

JS生成一维码(条形码)功能示例

2017/01/19 Javascript

Angular.js中下拉框实现渲染html的方法

2017/06/18 Javascript

javaScript日期工具类DateUtils详解

2017/12/08 Javascript

vue实现图片按比例缩放问题操作

2020/08/11 Javascript

PHP读取远程txt文档到数组并实现遍历

2020/08/25 Javascript

如何利用node转发请求详解

2020/09/17 Javascript

python用插值法绘制平滑曲线

2021/02/19 Python

更新修改后的Python模块方法

2019/03/03 Python

python脚本当作Linux中的服务启动实现方法

2019/06/28 Python

详解python opencv、scikit-image和PIL图像处理库比较

2019/12/26 Python

Python flask框架端口失效解决方案

2020/06/04 Python

python如何求圆的面积

2020/07/01 Python

美国杂志订阅折扣与优惠网站：Magazines.com

2016/08/31 全球购物

迅雷Cued工作心得体会

2014/01/27 职场文书

岗位标兵事迹材料

2014/05/17 职场文书

开展读书活动总结

2014/06/30 职场文书

领导干部群众路线个人对照检查材料思想汇报

2014/09/30 职场文书

使用Djongo模块在Django中使用MongoDB数据库

2021/06/20 Python