编程 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 相关文章推荐

jquery isType() 类型判断代码

Feb 14 Javascript

DOM 事件流详解

Jan 20 Javascript

jQuery实现文件上传进度条特效

Aug 12 Javascript

javascript实现全角转半角的方法

Jan 23 Javascript

微信小程序 location API接口详解及实例代码

Oct 12 Javascript

使用vue.js实现checkbox的全选和多个的删除功能

Feb 17 Javascript

实现div滚动条默认最底部以及默认最右边的示例代码

Nov 15 Javascript

Vue 开发音乐播放器之歌手页右侧快速入口功能

Aug 08 Javascript

vue2.0 使用element-ui里的upload组件实现图片预览效果方法

Sep 04 Javascript

webpack4 入门最简单的例子介绍

Sep 05 Javascript

9102年webpack4搭建vue项目的方法步骤

Feb 20 Javascript

javascript实现异形滚动轮播

Nov 28 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

深入了解 register_globals (附register_globals=off 网站打不开的解决方法)

2012/06/27 PHP

php插入含有特殊符号数据的处理方法

2016/11/24 PHP

PHP+MySQL高并发加锁事务处理问题解决方法

2018/04/30 PHP

PHP 多进程与信号中断实现多任务常驻内存管理实例方法

2019/10/04 PHP

效率高的Javscript字符串替换函数的benchmark

2008/08/02 Javascript

javascript显示用户停留时间的简单实例

2013/08/05 Javascript

深入理解JavaScript中的传值与传引用

2013/12/09 Javascript

Jquery easyui 实现动态树

2015/11/17 Javascript

探索Javascript中this的奥秘

2016/12/11 Javascript

JS实现获取来自百度,Google,soso,sogou关键词的方法

2016/12/21 Javascript

用JavaScript和jQuery实现瀑布流

2017/03/19 Javascript

详解基于Node.js的微信JS-SDK后端接口实现代码

2017/07/15 Javascript

BootStrap 页签切换失效的解决方法

2017/08/17 Javascript

angular2中Http请求原理与用法详解

2018/01/11 Javascript

JS装饰器函数用法总结

2018/04/21 Javascript

使用vue-router为每个路由配置各自的title

2018/07/30 Javascript

Vue.js数字输入框组件使用方法详解

2019/10/19 Javascript

node.js中process进程的概念和child_process子进程模块的使用方法示例

2020/02/11 Javascript

Vue项目vscode 安装eslint插件的方法(代码自动修复)

2020/04/15 Javascript

Python判断文件和文件夹是否存在的方法

2015/05/21 Python

在Django的session中使用User对象的方法

2015/07/23 Python

python抓取文件夹的所有文件

2018/02/27 Python

一篇文章搞懂Python的类与对象名称空间

2018/12/10 Python

Python 硬币兑换问题

2019/07/29 Python

对Python获取屏幕截图的4种方法详解

2019/08/27 Python

python 图像处理画一个正弦函数代码实例

2019/09/10 Python

python打印文件的前几行或最后几行教程

2020/02/13 Python

django-利用session机制实现唯一登录的例子

2020/03/16 Python

css3 实现圆形旋转倒计时

2018/02/24 HTML / CSS

iPad和Surface Pro蓝牙键盘：Brydge

2018/11/10 全球购物

受欢迎的大学生自我评价

2013/12/05 职场文书

《那片绿绿的爬山虎》教学反思

2014/02/27 职场文书

公司业务员岗位职责

2014/03/18 职场文书

高速铁道技术专业求职信

2014/08/09 职场文书

Python学习之包与模块详解

2022/03/19 Python

CentOS7设置ssh服务以及端口修改方式

2022/12/24 Servers