很久没有与大家分享了,这是一个很简单的效果,look……
<ul class="moddle f-cb"> <li class="boun"><a href="javascript:void(0);">【搜索提交模板】<span class="jia">+</span></a> <ul class="moddle-1"> <li><a href="#">【搜索提交模板】</a></li> <li><a href="#">【搜索提交模板】</a></li> <li><a href="#">【搜索提交模板】</a></li> </ul></li> <li class="boun"><a href="javascript:void(0);">【搜索提交模板】<span class="jia">+</span></a> <ul class="moddle-1"> <li><a href="#">【搜索提交模板】</a></li> <li><a href="#">【搜索提交模板】</a></li> <li><a href="#">【搜索提交模板】</a></li> </ul></li> <li class="boun"><a href="javascript:void(0);">【搜索提交模板】<span class="jia">+</span></a> <ul class="moddle-1"> <li><a href="#">【搜索提交模板】</a></li> <li><a href="#">【搜索提交模板】</a></li> <li><a href="#">【搜索提交模板】</a></li> </ul> </li> <li class="boun"><a href="javascript:void(0);">【搜索提交模板】<span class="jia">+</span></a> <ul class="moddle-1"> <li><a href="#">【搜索提交模板】</a></li> <li><a href="#">【搜索提交模板】</a></li> <li><a href="#">【搜索提交模板】</a></li> </ul></li> </ul>
js代码在这里:
$(document).ready(function(){ $(".boun>a").click(function(){ var ulNode = $(this).next("ul"); if(ulNode.css("display")=="none"){ ulNode.css("display","block") $(".jia",this).html("<span>-</span>"); }else{ ulNode.css("display","none") $(".jia",this).html("<span>+</span>"); } //ulNode.slideToggle() }); });