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 相关文章推荐
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
jquery实现显示已选用户
Jul 21 Javascript
完善的jquery处理机制
Feb 21 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
vue插件实现v-model功能
Sep 10 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 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写出自己的BLOG系统 2
2010/04/12 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
JS之相等操作符详解
2016/09/13 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
Numpy掩码式数组详解
2018/04/17 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
小学少先队活动方案
2014/02/18 职场文书
国庆促销活动总结
2014/08/29 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
Vue Mint UI mt-swipe的使用方式
2022/06/05 Vue.js