Bootstrap实现可折叠分组侧边导航菜单


Posted in Javascript onMarch 07, 2018

效果图:

Bootstrap实现可折叠分组侧边导航菜单

Bootstrap实现可折叠分组侧边导航菜单

源码:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>表格</title>
    <meta name="keywords" content="侧边导航菜单(可分组折叠)">
    <meta name="description" content="侧边导航菜单(可分组折叠)" />
    <meta name="HandheldFriendly" content="True" />
    <link rel="shortcut icon" href="img/favicon.ico" rel="external nofollow" >
    <!-- Bootstrap3.3.5 CSS -->
    <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      .panel-group{max-height:770px;overflow: auto;}
      .leftMenu{margin:10px;margin-top:5px;}
      .leftMenu .panel-heading{font-size:14px;padding-left:20px;height:36px;line-height:36px;color:white;position:relative;cursor:pointer;}/*转成手形图标*/
      .leftMenu .panel-heading span{position:absolute;right:10px;top:12px;}
      .leftMenu .menu-item-left{padding: 2px; background: transparent; border:1px solid transparent;border-radius: 6px;}
      .leftMenu .menu-item-left:hover{background:#C4E3F3;border:1px solid #1E90FF;}
    </style>
  </head>
  <body>
    <div class="row">
      <div class="col-md-2">
        <div class="panel-group table-responsive" role="tablist">
          <div class="panel panel-primary leftMenu">
            <!-- 利用data-target指定要折叠的分组列表 -->
            <div class="panel-heading" id="collapseListGroupHeading1" data-toggle="collapse" data-target="#collapseListGroup1" role="tab" >
              <h4 class="panel-title">
                分组1
                <span class="glyphicon glyphicon-chevron-up right"></span>
              </h4>
            </div>
            <!-- .panel-collapse和.collapse标明折叠元素 .in表示要显示出来 -->
            <div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading1">
              <ul class="list-group">
               <li class="list-group-item">
                <!-- 利用data-target指定URL -->
                <button class="menu-item-left" data-target="test2.html">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-1
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-2
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-3
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-4
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-5
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-6
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-7
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-8
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-9
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-10
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项1-11
                </button>
               </li>
              </ul>
            </div>
          </div><!--panel end-->
          <div class="panel panel-primary leftMenu">
            <div class="panel-heading" id="collapseListGroupHeading2" data-toggle="collapse" data-target="#collapseListGroup2" role="tab" >
              <h4 class="panel-title">
                分组2
                <span class="glyphicon glyphicon-chevron-down right"></span>
              </h4>
            </div>
            <div id="collapseListGroup2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseListGroupHeading2">
              <ul class="list-group">
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项2-1
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项2-2
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项2-3
                </button>
               </li>
               <li class="list-group-item">
                <button class="menu-item-left">
                  <span class="glyphicon glyphicon-triangle-right"></span>分组项2-4
                </button>
               </li>
              </ul>
            </div>
          </div> 
        </div>
      </div>
      <div class="col-md-10">
        内容
      </div>
    </div>
    <!-- jQuery1.11.3 (necessary for Bo otstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.3.min.js "></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js "></script>
    <script>
    $(function(){
      $(".panel-heading").click(function(e){
        /*切换折叠指示图标*/
        $(this).find("span").toggleClass("glyphicon-chevron-down");
        $(this).find("span").toggleClass("glyphicon-chevron-up");
      });
    });
    </script>
  </body>
</html>

总结

以上所述是小编给大家介绍的Bootstrap实现可折叠分组侧边导航菜单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
vue实现节点增删改功能
Sep 26 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 #Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 #Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 #Javascript
Vue中v-for的数据分组实例
Mar 07 #Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 #Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 #Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 #Javascript
You might like
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
开发大型PHP项目的方法
2006/10/09 PHP
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
PHP 加密解密内部算法
2010/04/22 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
python实现批量监控网站
2016/09/09 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
python实现简单加密解密机制
2019/03/19 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
预备党员转正思想汇报
2014/01/12 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
会计求职自荐信范文
2015/03/04 职场文书