jQuery实现文档树效果


Posted in Javascript onFebruary 20, 2017

情形:本类别下面有好多子类别,每个子类别下面又有好多孙类别;需求:当点击本类别时,子类别如果是显示的就让它隐藏,子类别如果是隐藏的就让它显示。

效果如下:

jQuery实现文档树效果

图(1)点击前

jQuery实现文档树效果

图(2)点击后

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  *{
   margin:0;
   padding:0;
   list-style: none;
  }
  .box{
   width: 250px;
   height: auto;
   padding: 20px;
   background: lightgrey;
   margin:0 auto;
  }
  .box li{
   line-height: 30px;
   /*注意:height没有被设置,可以根据实际需要自动调整*/
   position: relative;
  }
  .box li em{
   position: absolute;
   left:0;
   top:7px;
   width: 16px;
   height: 16px;
   background-image: url("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=123b5048273b92eb544ad6eb0ed57c44");
   background-size:100%;
   cursor: pointer;
  }
  .box li em.open{
   background-image: url("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=8f89447399822b0294ae590ccc641bf5");
   background-size:100%;
  }
  .box li span{
   padding-left: 20px;
   /*因为span前面的em已经绝对定位,脱离文档流了,所以span的左边界直达 li*/
  }
  .box ul{
   display: none;
  }
  .two{
    margin-left: 20px;
  }
  .three{
   margin-left: 40px;
  }
  .four{
   margin-left: 40px;
  }
  /*ul.box下的li显示,其中有折叠的li加em;
   ul.box下的ul隐藏,其内部的li是没法显示的*/
 </style>
</head>
<body>
<ul class="box">
 <li><em></em><span>第一级第一个</span>
  <ul class="two">
   <li><span>第二级第一个</span></li>
   <li><em></em><span>第二级第二个</span>
    <ul class="three">
     <li><em></em><span>第三级第一个</span>
      <ul class="four">
       <li><span>第四级第一个</span></li>
       <li><span>第四级第二个</span></li>
      </ul>
     </li>
     <li><span>第三级第二个</span></li>
    </ul>
   </li>
   <li><em></em><span>第二级第三个</span>
    <ul class="three">
     <li><span>第三级第一个</span></li>
     <li><span>第三级第二个</span></li>
    </ul>
   </li>
  </ul>
 </li>
 <li><em></em><span>第一级第一个</span>
  <ul class="two">
   <li><span>第二级第一个</span></li>
   <li><em></em><span>第二级第二个</span>
    <ul class="three">
     <li><em></em><span>第三级第一个</span>
      <ul class="four">
       <li><span>第四级第一个</span></li>
       <li><span>第四级第二个</span></li>
      </ul>
     </li>
     <li><span>第三级第二个</span></li>
    </ul>
   </li>
  </ul>
 </li>
</ul>
<script src="http://s0.kuaizhan.com/res/skin/js/lib/jquery-2.0.3.min.js"></script>
<script>
 /*思路:
 * 1.让前面有em的span加上小手效果;
 * 2.点击span or em的时候,看他父容器下是否有ul,如果有,让其显示,否则,隐藏
 * */
 var $box=$('.box');
 var $aSpan=$box.find('span');
 //1.让前面有em的span加上小手效果;
 $aSpan.each(function(index,item){
  //if($(item).prev().length){ $(item).css('cursor','pointer');};思路1:
  $(item).prev('em').next('span').css('cursor','pointer'); //思路2:
 });
 //2.点击span or em的时候,看他父容器下是否有ul,如果有,让其显示,否则,隐藏
 $box.click(function(e){
  //当点击的事件源是em or span的时候,我们看其父级下是否有ul
  // 如果有:展开让其闭合,闭合就让其展开;
  if(e.target.tagName.toLowerCase()=='em' || e.target.tagName.toLowerCase()=='span'){
   var $parent=$(e.target).parent();
   var $ul=$parent.children('ul');
   if($ul){
    if($ul.css('display')=='block'){//展开,让其闭合
     //当闭合的时候,让当前容器下,所有的em都移除open,所有的ul都隐藏;
     $parent.find('ul').hide();
     $parent.find('em').removeClass('open');
    }else{ //闭合让其展开
     $ul.show();
     $parent.children('em').addClass('open');
    }
   }
  }
 })
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
js以及jquery实现手风琴效果
Apr 17 #Javascript
写jQuery插件时的注意点
Feb 20 #Javascript
Node.js获取前端ajax提交的request信息
Feb 20 #Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 #Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 #Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 #Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
2020/09/11 Javascript
python使用scrapy解析js示例
2014/01/23 Python
python使用any判断一个对象是否为空的方法
2014/11/19 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
经济学人订阅:The Economist
2018/07/19 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
测绘工程专业个人自我评价
2013/12/01 职场文书
打架检讨书500字
2014/01/29 职场文书
保密工作责任书
2014/04/16 职场文书
青年文明号口号
2014/06/17 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
房产协议书范本2014
2014/09/30 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python