如何使用Jquery实现文档树效果?

如何使用Jquery实现文档树效果?

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

效果如下:

如何使用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>

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