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的类似新浪微博展示信息效果的代码
Jul 23 Javascript
angular.element方法汇总
Jan 07 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
js合并两个数组生成合并后的key:value数组
May 09 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 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操作csv文件代码实例汇总
2014/09/22 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
jQuery Mobile 导航栏代码
2013/11/01 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Python 错误和异常代码详解
2018/01/29 Python
Python列表解析配合if else的方法
2018/06/23 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
Python API自动化框架总结
2019/11/12 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
游戏商店:Eneba
2020/04/25 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
爱心捐款倡议书
2014/04/14 职场文书
干部考核评语
2014/04/29 职场文书
民生工作实施方案
2014/05/31 职场文书
保护地球的标语
2014/06/17 职场文书
学习党章的体会
2014/11/07 职场文书
服务承诺书
2015/01/19 职场文书
学术会议通知
2015/04/15 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
python 下载文件的几种方式分享
2021/04/07 Python