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 写类方式之二
Jul 05 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
JavaScript函数详解
Feb 27 Javascript
Augularjs-起步详解
Jul 08 Javascript
angular分页指令操作
Jan 09 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 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
跟我学Laravel之配置Laravel
2014/10/15 PHP
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python判断Abundant Number的方法
2015/06/15 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
keras 多gpu并行运行案例
2020/06/10 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
学校办公室主任职责
2013/12/27 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
公司禁烟通知
2015/04/23 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
Python趣味挑战之给幼儿园弟弟生成1000道算术题
2021/05/28 Python
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js