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

$.ajax json数据传递方法

Nov 19 Javascript

jsvascript图像处理—(计算机视觉应用)图像金字塔

Jan 15 Javascript

JavaScript实现网页上的浮动广告的简单方法

Jun 14 Javascript

可插入图片的TEXT文本框

Dec 27 Javascript

jQuery焦点图切换特效代码分享

Sep 15 Javascript

MVC Ajax Helper或Jquery异步加载部分视图

Nov 29 Javascript

详解JavaScript数组和字符串中去除重复值的方法

Mar 07 Javascript

总结JavaScript的正则与其他语言的不同之处

Aug 25 Javascript

vue中引入mxGraph的步骤详解

May 17 Javascript

细说webpack6 Babel的使用详解

Sep 26 Javascript

vue实现购物车的监听

Apr 20 Javascript

vue点击按钮实现简单页面的切换

Sep 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下用GD生成生成缩略图的两个选择和区别

2007/04/17 PHP

PHP echo,print,printf,sprintf函数之间的区别与用法详解

2013/11/27 PHP

php注册系统和使用Xajax即时验证用户名是否被占用

2017/08/31 PHP

用js脚本控制asp.net下treeview的NodeCheck的实现代码

2010/03/02 Javascript

js function使用心得

2010/05/10 Javascript

ajax更新数据后，jquery、jq失效问题

2011/03/16 Javascript

40款非常棒的jQuery 插件和制作教程（系列二）

2011/11/02 Javascript

12款经典的白富美型—jquery图片轮播插件—前端开发必备

2013/01/08 Javascript

JQuery动画和停止动画实例代码

2013/03/01 Javascript

SOSO地图JS画出标注和中心点以html形式运行

2013/08/09 Javascript

判断一个对象是否为jquery对象的方法

2014/03/12 Javascript

jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7

2014/06/16 Javascript

基于AngularJS实现页面滚动到底自动加载数据的功能

2015/10/16 Javascript

AngularJS 模型详细介绍及实例代码

2016/07/27 Javascript

AngularJS深入探讨scope，继承结构，事件系统和生命周期

2016/11/02 Javascript

JQuery实现动态操作表格

2017/01/11 Javascript

整理关于Bootstrap过渡动画的慕课笔记

2017/03/29 Javascript

Node.js的Koa实现JWT用户认证方法

2018/05/05 Javascript

前端插件之Bootstrap Dual Listbox使用教程

2019/07/23 Javascript

layUI实现三级导航菜单效果

2019/07/26 Javascript

原生js生成图片验证码

2020/10/11 Javascript

如何搜索查找并解决Django相关的问题

2014/06/30 Python

Python中传递值和传递引用的区别解析

2018/02/22 Python

python基础教程项目二之画幅好画

2018/04/02 Python

关于python写入文件自动换行的问题

2018/06/23 Python

OpenCV 轮廓检测的实现方法

2019/07/03 Python

python开头的coding设置方法

2019/08/08 Python

Python自动化测试基础必备知识点总结

2021/02/07 Python

英国和爱尔兰的自炊式豪华度假小屋：Rural Retreats

2018/06/08 全球购物

宏碁西班牙官网：Acer西班牙

2021/01/08 全球购物

Perfume’s Club澳大利亚官网：西班牙领先的在线美容店

2021/02/01 全球购物

最新的互联网创业计划书

2014/01/10 职场文书

公司任命书模板

2014/06/06 职场文书

食品药品安全责任书

2015/05/11 职场文书

人为什么会“幸灾乐祸”?

2019/08/06 职场文书

SQL模糊查询报:ORA-00909:参数个数无效问题的解决

2021/06/21 Oracle