一个封装js代码-----展开收起效果示例

193 阅读 0 评论 128 点赞

我是靠谱客的博主幸福大树，最近开发中收集的这篇文章主要介绍一个封装js代码-----展开收起效果示例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

第一次靠自己完整的封装的小特效，有点小小的兴奋，和大家分享下，希望能对和我一样在探索的童鞋们有点帮助
js部分：

复制代码代码如下:

 
var show_obj = function(obj,at,ob){ 
$(obj).bind('click', function(){ 
var showTxt = $(this).children(at); 
//alert($(at).html()); 
//alert(sObj); 
//alert(); 
//alert($(this).parent().children(p).html()); 
if(showTxt.html() == '+'){ 
showTxt.html('-') 
}else{ 
showTxt.html('+') 
} 
$(this).parent().children(ob).slideToggle(300); 
}) 
} 

html 引用：

复制代码代码如下:

 
$(function(){ 
show_obj('.slide_show','.slide_show a','.p-silde'); 
}) 
html 代码： 
<ul> 
<li> 
<div class="clearfix slide_show"><span style="float:left">我有列表</span><a style="float:right">+</a></div> 
<p class="p-silde" style="display:none"> 
<a href="#">列表1</a> 
<a href="#">列表2</a> 
<a href="#">列表3</a> 
</p> 
</li> 
<li> 
<div class="clearfix slide_show"><span style="float:left">我有列表</span><a style="float:right">+</a></div> 
<p class="p-silde" style="display:none"> 
<a href="#">列表1</a> 
<a href="#">列表2</a> 
<a href="#">列表3</a> 
</p> 
</li> 
<li> 
<div class="clearfix slide_show"><span>我没有列表</span></div> 
</li> 
</ul> 