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 相关文章推荐
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
js+canvas绘制矩形的方法
Jan 28 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 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+mysql保存和输出文件
2006/10/09 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实战教程之自动扫雷
2018/07/13 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
python日志模块logbook使用方法
2019/09/19 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
英语翻译系毕业生求职信
2013/09/29 职场文书
学校司机岗位职责
2013/11/14 职场文书
校园广播稿500字
2014/02/04 职场文书
校庆接待方案
2014/03/18 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
2015年手术室工作总结
2015/05/11 职场文书
小学英语听课心得体会
2016/01/14 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
virtualenv隔离Python环境的问题解析
2022/06/21 Python