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

Javascript 相关文章推荐
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
js 三级关联菜单效果实例
Aug 13 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
requireJS使用指南
Apr 27 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
JS实现的JSON数组去重算法示例
Apr 11 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
浅谈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 不错的学习资料
2009/02/06 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
详解JS预解析原理
2020/06/16 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
python解析文件示例
2014/01/23 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
Python编程argparse入门浅析
2018/02/07 Python
Python登录注册验证功能实现
2018/06/18 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
python自动生成model文件过程详解
2019/11/02 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
简单了解python列表和元组的区别
2020/05/14 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
python 6行代码制作月历生成器
2020/09/18 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
人代会标语
2014/06/30 职场文书
大型公益活动策划方案
2014/08/20 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
postgresql中如何执行sql文件
2023/05/08 PostgreSQL