jQuery实现文档树效果

2019-11-19 17:29:00

字体：大中小

来源：转载

供稿：网友

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

效果如下：

图（1）点击前

图（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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：bootstrap PrintThis打印插件使用详解

下一篇：js以及jquery实现手风琴效果