jQuery实现文档树效果
更新时间：2017年02月20日 17:00:34 作者：前端工程师_钱成
本文主要分享了jQuery实现文档树效果的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
情形：本类别下面有好多子类别，每个子类别下面又有好多孙类别；需求：当点击本类别时，子类别如果是显示的就让它隐藏，子类别如果是隐藏的就让它显示。
效果如下：
图（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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了jquery实现轮播图特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
jQuery的数据框架没有将元素数据当作元素属性来存储，我记得是可以通过jQuery的data("xxx")方法取HTML标签上的data-xxx属性的值的2013-08-08
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
模态窗体已经成为Web开发人员设计界面时经常要使用的传输数据的方式;通过模态窗口，可以提高网站的可用性;你可以在你的邮件里收到用户发送的反馈消息2013-01-01
页面长度较大，需要方便快速的在页面的不同位置进行定位，所以浮动菜单逐渐流行了起来，下面是jQuery浮动导航菜单适合购物网站商品类型2014-09-09
实用jQuery分页特效插件jquery.pagination.js，基于jQuery实现，本文给大家分享jquery分页插件之jquery pagination，需要的朋友可以参考下2015-08-08
在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片，占了几百K的空间。那么我们如何才能改变这种状况呢，这就是今天我们要探讨的问题了。2015-03-03
本文主要介绍 jquery 属性选择器的知识，这里有简单实现代码和实例讲解，有需要的小伙伴可以参考下2016-09-09
很多网站的首页都有广告轮播，今天闲来看了一网站的首页广告轮播方式，是通过 jQuery的blockSlide插件实现的，然后自己测试了一下，很好。2010-11-11
这两天的工作内容不多，基本是关于jquery中ajax的。之前一直都是写的最简单的ajax请求，并没关注怎么获取ajax返回值的问题。2015-08-08
这篇文章主要介绍了jQuery中mouseover事件用法,以实例形式分析了mouseover事件处理鼠标指针滑过时的使用技巧,需要的朋友可以参考下2014-12-12
最新评论