编程 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遭遇CoffeeScript的时候使用分享

Sep 17 Javascript

JavaScript数组对象赋值用法实例

Aug 04 Javascript

JS实现禁止鼠标右键的功能

Oct 15 Javascript

Dec 08 Javascript

Angular2 路由问题修复详解

Mar 01 Javascript

基于JS实现仿京东搜索栏随滑动透明度渐变效果

Jul 10 Javascript

ES6解构赋值的功能与用途实例分析

Oct 31 Javascript

解决iView中时间控件选择的时间总是少一天的问题

Mar 15 Javascript

浅谈Vuex注入Vue生命周期的过程

May 20 Javascript

LayUi数据表格自定义赋值方式

Oct 26 Javascript

原生JavaScript之es6中Class的用法分析

Feb 23 Javascript

js面向对象封装级联下拉菜单列表的实现步骤

Feb 08 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

用在PHP里的JS打印函数

2006/10/09 PHP

基于PHP与XML的PDF文档生成技术

2006/10/09 PHP

一个php作的文本留言本的例子(三)

2006/10/09 PHP

PHP类与对象中的private访问控制的疑问

2012/11/01 PHP

你可能不知道PHP get_meta_tags()函数

2014/05/12 PHP

PHP页面跳转操作实例分析(header方法)

2016/09/28 PHP

使用Laravel中的查询构造器实现增删改查功能

2019/09/03 PHP

开发 Internet Explorer 右键功能表(ContextMenu)

2013/07/03 Javascript

indexOf 和 lastIndexOf 使用示例介绍

2014/09/02 Javascript

jQuery中:enabled选择器用法实例

2015/01/04 Javascript

详解Bootstrap的iCheck插件checkbox和radio

2016/08/24 Javascript

js控制台输出的方法(详解)

2016/11/26 Javascript

详解JS中统计函数执行次数与执行时间

2018/09/04 Javascript

Vue使用zTree插件封装树组件操作示例

2019/04/25 Javascript

关于ligerui子页面关闭后,父页面刷新,重新加载的方法

2019/09/27 Javascript

5个你不知道的JavaScript字符串处理库(小结)

2020/06/01 Javascript

浅谈vue-props的default写不写有什么区别

2020/08/09 Javascript

JS绘图Flot如何实现动态可刷新曲线图

2020/10/16 Javascript

vue切换菜单取消未完成接口请求的案例

2020/11/13 Javascript

用python结合jieba和wordcloud实现词云效果

2017/09/05 Python

Python 装饰器实现DRY(不重复代码)原则

2018/03/05 Python

详解python实现识别手写MNIST数字集的程序

2018/08/03 Python

Python 可变类型和不可变类型及引用过程解析

2019/09/27 Python

Python中有几个关键字

2020/06/04 Python

CSS3 简单又实用的5个属性

2010/03/04 HTML / CSS

html5使用Drag事件编辑器拖拽上传图片的示例代码

2017/08/22 HTML / CSS

TIME时代杂志台湾总代理：台时亚洲

2018/10/22 全球购物

台湾全方位线上课程与职能学习平台：TibaMe

2019/12/04 全球购物

设计大赛策划方案

2014/06/13 职场文书

环境卫生倡议书

2014/08/29 职场文书

毕业生实习证明

2014/09/19 职场文书

小学生校园广播稿

2014/09/28 职场文书

2014年房地产销售工作总结

2014/12/01 职场文书

2015年幼师工作总结

2015/04/28 职场文书

ThinkPHP5和ThinkPHP6的区别

2021/03/31 PHP

python中的None与NULL用法说明

2021/05/25 Python