Bootstrap框架建立树形菜单(Tree)的实例代码


Posted in Javascript onOctober 30, 2017

 这里的Tree指的是树形菜单,这篇文章通过一个实例来讲解一下,在Bootstrap框架下怎么去建立一个树形菜单。

前提:先添加Bootstrap和JQ的引用

<link rel="stylesheet" type="text/css" href="bootstrap-3.3.0-dist/dist/css/bootstrap.min.css" rel="external nofollow" >
<script src="bootstrap-3.3.0-dist/dist/js/jquery-1.11.2.min.js"></script>
<script src="bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script>

HTML CODE

<div class="tree well">
 <ul>
 <li> <span><i class="icon-folder-open"></i> 廊坊师范学院</span>
  <ul>
  <li> <span><i class="icon-minus-sign"></i> 教育学院</span>
   <ul>
   <li> <span><i class="icon-leaf"></i> 学前教育</span> </li>
   </ul>
  </li>
  <li> <span><i class="icon-minus-sign"></i> 物电学院</span>
   <ul>
   <li> <span><i class="icon-leaf"></i> 电气工程技术</span> </li>
   <li> <span><i class="icon-minus-sign"></i> 电子信息科学技术</span>
    <ul>
    <li> <span><i class="icon-minus-sign"></i> 电子一班</span>
     <ul>
     <li> <span><i class="icon-leaf"></i> 宋笑</span> </li>
     <li> <span><i class="icon-leaf"></i> 二盟</span> </li>
     </ul>
    </li>
    <li> <span><i class="icon-leaf"></i> 电子二班</span> </li>
    </ul>
   </li>
   <li> <span><i class="icon-leaf"></i> 物理学</span> </li>
   </ul>
  </li>
  </ul>
 </li>
 </ul>
</div>

CSS CODE

(为树形菜单添加样式,使其符合Bootstrap框架的风格)

.tree {
 min-height:20px;
 padding:19px;
 margin-bottom:20px;
 background-color:#fbfbfb;
 border:1px solid #999;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius:4px;
 -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
 -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
 box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree li {
 list-style-type:none;
 margin:0;
 padding:10px 5px 0 5px;
 position:relative
}
.tree li::before, .tree li::after {
 content:'';
 left:-20px;
 position:absolute;
 right:auto
}
.tree li::before {
 border-left:1px solid #999;
 bottom:50px;
 height:100%;
 top:0;
 width:1px
}
.tree li::after {
 border-top:1px solid #999;
 height:20px;
 top:25px;
 width:25px
}
.tree li span {
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border:1px solid #999;
 border-radius:5px;
 display:inline-block;
 padding:3px 8px;
 text-decoration:none
}
.tree li.parent_li>span {
 cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
 border:0
}
.tree li:last-child::before {
 height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
 background:#eee;
 border:1px solid #94a0b4;
 color:#000
}

JS CODE

<script type="text/javascript">
 //为节点添加展开,关闭的操作
$(function(){
 $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
 $('.tree li.parent_li > span').on('click', function (e) {
  var children = $(this).parent('li.parent_li').find(' > ul > li');
  if (children.is(":visible")) {
   children.hide('fast');
   $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
  } else {
   children.show('fast');
   $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
  }
  e.stopPropagation();
 });
});
</script>

效果:

Bootstrap框架建立树形菜单(Tree)的实例代码 

一棵符合Bootstrap风格的树就这么建造完成了,优点自不用说:整洁,美观。

这是一个demo,所以树中的值都是写死在html里面的,但是在实际项目中,树形菜单一般都是动态生成的,而Bootstrap却没有为我们提供一个类似TreeView那样的控件,只需要绑定上数据就可以动态生成一棵树,所以生成树的逻辑都需要我们手动用JS代码进行编写。这个过程着实有点繁琐,递归+嵌套。。

当然市面上也有很多封装好的一些树形菜单的插件,DTree,TreeList widget,Ztree,jQuery等等,就是外观和Bootstrap框架有点不搭。

有这么个折中的办法,就是取长补短,把Bootstrap的样式应用到这些封装好的树形插件上来满足需求。

Javascript 相关文章推荐
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
jQuery插件简单实现方法
Jul 18 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
JavaScript Dom实现轮播图原理和实例
Feb 19 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
react实现一个优雅的图片占位模块组件详解
Oct 30 #Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 #Javascript
原生JS与jQuery编写简单选项卡
Oct 30 #jQuery
简单实现jQuery弹窗效果
Oct 30 #jQuery
Bootstrap栅格系统的使用详解
Oct 30 #Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 #Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 #Javascript
You might like
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
封装好的省市地区联动控件附下载
2007/08/13 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
2014/06/06 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
Python比较两个图片相似度的方法
2015/03/13 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
pymysql 开启调试模式的实现
2019/09/24 Python
基于python3生成标签云代码解析
2020/02/18 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
高中生期末评语
2014/01/28 职场文书
学校招生宣传广告词
2014/03/19 职场文书
2015年大学生实习评语
2015/03/25 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis