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 相关文章推荐
Javascript自定义排序 node运行 实例
Jun 05 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
在Vue-cli里应用Vuex的state和mutations方法
Sep 16 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 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
第五节--克隆
2006/11/16 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
vue.js中npm安装教程图解
2018/04/10 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
找到不普通的东西:Bonanza
2016/10/20 全球购物
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
求职推荐信
2013/10/28 职场文书
写给老师的表扬信
2014/01/21 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
深入理解redis中multi与pipeline
2021/06/02 Redis
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS