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 相关文章推荐
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
js中判断控件是否存在
Aug 25 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
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中显示数组与对象的实现代码
2011/04/18 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
js 数值项目的格式化函数代码
2010/05/14 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
对pandas中apply函数的用法详解
2018/04/10 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
python调用其他文件函数或类的示例
2019/07/16 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
python十进制转二进制的详解
2020/02/07 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
会计实习期自我鉴定
2013/10/06 职场文书
大学同学会活动方案
2014/08/20 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
JavaScript的function函数详细介绍
2021/11/20 Javascript
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript