jQuery实现文档树效果

情况：这个类别下有很多子类别，每个子类别下都有很多孙子孙女；要求：点击该类别时，如果显示子类别，则隐藏，如果隐藏子类别，则显示。

效果如下：

单击前的图(1)

图(2)点击后

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title style * { margin :0；划水：0;列表样式：无；} .box { width : 250 pxheart : autopadding : 20px背景：浅灰色；margin:0 auto}。方框李{行高： 30px/*注意：高度没有被设置，可以根据实际需要自动调整*/position:相对；} .方框Li em { position : absolute eleft :0 top :7 px宽度： 16pxheight : 16pxbackground-image : URL(' http://www。qd uns。com/misc . PHP？mod=attach gender=editor aid=123 b 5048273 b 92 EB 544 ad 6 EB 0ed 57 c 44 '；背景尺寸：100%;光标：指针；} .李盒子。打开{ background-image : URL(' http://www。qd funs。com/misc . PHP？mod=attach gender=editor aid=8f 89447399822 b 0294 AE 590 CCC 641 bf5 '；背景尺寸：100%;} .方框Li span {左填充： 20px/*因为跨度前面的全身长的已经绝对定位，脱离文档流了，所以跨度的左边界直达li*/} .box ul { display: none}。两个{左边距： 20px} .三{左边距： 40px} .四{左边距： 40px} /*ul.box下的里显示，其中有折叠的里加em；ul.box下的保险商实验所隐藏，其内部的里是没法显示的*//样式/头戴式第一级第一个/span ul class='two' lispan第二级第一个/span/li liem/emspan第二级第二个/span ul class='三liem/emspan第三级第一个/span ul class='four' lispan第四级第一个/span/li lispan第四级第二个/span/li /ul /li lispan第三级第二个/span/li /ul /li liem/emspan第二级第三个/span ul class='三利斯潘第三级第一个/span/li lispan第三级第二个/span/Li/ul/Li/ul/Li/Li/em span第一级第一个/span ul class='two' lispan第二级第一个/span/li liem/emspan第二级第二个/span ul class='三liem/emspan第三级第一个/span ul class='four' lispan第四级第一个/span/li lispan第四级第二个/span/li /ul /li lispan第三级第二个/span/Li/ul/Li/ul/Li/ulscript src=' http :http://s 0。蒯展。com/RES/skin/js/lib/jquery-2。0 .3 .量滴js '/脚本脚本/*思路： * 1.让前面有全身长的的跨度加上小手效果；* 2.点击跨度或全身长的的时候，看他父容器下是否有ul，如果有，让其显示，否则，隐藏* */var $box=$(' .方框');var $ AsPAN=$ box。find(' span ')；//1.让前面有全身长的的跨度加上小手效果；$aSpan .每个(函数（索引，项){ //if($(项))。prev().长度){ $(项目)。css(“”光标','指针');};思路1:美元（物品)。prev('em ').下一个(' span ').css(“”光标','指针');//思路2: });//2.点击跨度或全身长的的时候，看他父容器下是否有ul，如果有，让其显示，否则，隐藏$box.click(函数(e){ //当点击的事件源是全身长的或跨度的时候，我们看其父级下是否有ul /如果有：展开让其闭合，闭合就让其展开；如果(例如目标。标记名。tolowercase()==' em ' | | e . target。标记名。tolowercase()==' span '){ var $ parent=$(e . target).parent()；var $ ul=$ parent。儿童(' ul ')；if($ ul){ if($ ul。CSS('显示')=='阻止'){//展开，让其闭合//当闭合的时候，让当前容器下，所有的全身长的都移除打开，所有的保险商实验所都隐藏；$parent.find('ul ').hide()；$parent.find('em ')。移除CLaSS(' open ')；}else{ //闭合让其展开$ ul。show()；$parent.children('em ').添加CLaSS(' open ')；} } } })/脚本/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！