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