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

Bootstrap 手风琴菜单的实现代码

- Author -

mrr

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

Javascript 相关文章推荐
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
JavaScript高级程序设计（第3版）学习笔记6 初识js对象
Oct 11 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 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
音箱(1) 收信机(3) ICF-2010(1) BOSE(2) 单管机(1) 摩托罗拉(1) 77A(2) 晶体管(2) 耳机(1) MOTOROLA(1)
You might like
php 分页函数multi() discuz
2009/06/21 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
JavaScript中setter和getter方法介绍
2016/07/11 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
python 编写简单网页服务器的实例
2018/06/01 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
Python元组 tuple的概念与基本操作详解【定义、创建、访问、计数、推导式等】
2019/10/30 Python
python之生成多层json结构的实现
2020/02/27 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
The North Face北面英国官网：美国著名户外品牌
2017/12/13 全球购物
德国孕妇装和婴童服装网上商店：bellybutton
2018/04/12 全球购物
sort命令的作用和用法
2013/08/25 面试题
国税会议欢迎词
2014/01/16 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
写给老师的保证书
2015/05/09 职场文书
老兵退伍感言
2015/08/03 职场文书
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL