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 相关文章推荐
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
vue组件的写法汇总
Apr 12 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
js中arguments对象的深入理解
May 14 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交互一例-PHP教程,PHP应用
2007/01/03 PHP
php 文本文件的读取效率
2012/02/10 PHP
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
windows下python之mysqldb模块安装方法
2017/09/07 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
曼城官方网上商店:Manchester City
2019/09/10 全球购物
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
大学生自我鉴定
2013/12/16 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
七匹狼男装广告词
2014/03/21 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2014年幼师工作总结
2014/11/22 职场文书
不同意离婚上诉状
2015/05/23 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
Python中Selenium对Cookie的操作方法
2021/07/09 Python
PyTorch中的torch.cat简单介绍
2022/03/17 Python