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

JavaScript DOM学习第八章表单错误提示

Feb 19 Javascript

JS实现定时页面弹出类似QQ新闻的提示框

Nov 07 Javascript

一个可以增加和删除行的table并可编辑表格中内容

Jun 16 Javascript

js实现下拉框选择要显示图片的方法

Feb 16 Javascript

正则表达式,替换所有HTML标签的简单实例

Nov 28 Javascript

node.js express中app.param的用法详解

Jul 16 Javascript

Angular4绑定html内容出现警告的处理方法

Nov 03 Javascript

基于vue-upload-component封装一个图片上传组件的示例

Oct 16 Javascript

d3绘制基本的柱形图的实现代码

Dec 12 Javascript

详解auto-vue-file:一个自动创建vue组件的包

Apr 26 Javascript

js实现炫酷光感效果

Sep 05 Javascript

JavaScript实现浏览器网页自动滚动并点击的示例代码

Dec 05 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与XML的PDF文档生成技术

2006/10/09 PHP

php字符串截取的简单方法

2013/07/04 PHP

PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法

2014/05/10 PHP

php之Smarty模板使用方法示例详解

2014/07/08 PHP

yii2高级应用之自定义组件实现全局使用图片上传功能的方法

2016/10/08 PHP

PHP后期静态绑定实例浅析

2018/12/21 PHP

PHP7新增函数

2021/03/09 PHP

JQuery入门—JQuery程序的代码风格详细介绍

2013/01/03 Javascript

解析瀑布流布局:JS+绝对定位的实现

2013/05/08 Javascript

JavaScript跨域方法汇总

2014/10/16 Javascript

JS实现FLASH幻灯片图片切换效果的方法

2015/03/04 Javascript

Javascript编写俄罗斯方块思路及实例

2015/07/07 Javascript

Bootstrap导航简单实现代码

2017/03/06 Javascript

JavaScript数据结构学习之数组、栈与队列

2017/05/02 Javascript

vue2.0 路由不显示router-view的解决方法

2018/03/06 Javascript

Vue.js最佳实践(五招助你成为vuejs大师)

2018/05/04 Javascript

Vue中使用clipboard实现复制功能

2018/09/05 Javascript

JS div匀速移动动画与变速移动动画代码实例

2019/03/26 Javascript

vue-iview动态新增和删除的方法

2020/06/17 Javascript

vue 实现基础组件的自动化全局注册

2020/12/25 Vue.js

Python安装pycurl失败的解决方法

2018/10/15 Python

Django模板语言 Tags使用详解

2019/09/09 Python

python对数组进行排序,并输出排序后对应的索引值方式

2020/02/28 Python

python 截取XML中bndbox的坐标中的图像,另存为jpg的实例

2020/03/10 Python

财务会计专业毕业生自荐信

2013/10/19 职场文书

节能标语大全

2014/06/21 职场文书

海洋科学专业求职信

2014/08/10 职场文书

党员领导干部民主生活会批评与自我批评发言

2014/09/28 职场文书

在教室放鞭炮的检讨书

2014/09/28 职场文书

2014小学数学教师个人工作总结

2014/12/18 职场文书

工厂仓管员岗位职责

2015/04/01 职场文书

2016春季运动会前导词

2015/11/25 职场文书

详解MySQL中的主键与事务

2021/05/27 MySQL

整理Python中常用的conda命令操作

2021/06/15 Python

mysql获取指定时间段中所有日期或月份的语句(不设存储过程，不加表)

2021/06/18 MySQL

Node.js实现爬取网站图片的示例代码

2022/04/04 NodeJs