99JS类库:jQuery实现文档树效果

情形:本类别下面有好多子类别,每个子类别下面又有好多孙类别;需求:当点击本类别时,子类别如果是显示的就让它隐藏,子类别如果是隐藏的就让它显示。
```html:run
<!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("");
background-size:100%;
cursor: pointer;
}
.box li em.open{
background-image: url("");
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>
```



相关文章

1.第一步 设置响应头 header(&#39;Access-Control-Allow...
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象(json对象) jaymou...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...