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


Posted in Javascript onJuly 03, 2013

第一次靠自己完整的封装的小特效,有点小小的兴奋,和大家分享下,希望能对和我一样在探索的童鞋们有点帮助
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>

PS:记住引用jQuery的框架,兼容ie6以上,火狐,谷歌,ie6没有测试大家可以自己测试
Javascript 相关文章推荐
JavaScript面向对象之体会[总结]
Nov 13 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
jQuery中after的两种用法实例
Jul 03 #Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 #Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 #Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 #Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 #Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 #Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 #Javascript
You might like
解析php中的escape函数
2013/06/29 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
javascript计时器详解
2015/02/28 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
javascript实现日历效果
2019/06/17 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
Python压缩和解压缩zip文件
2015/02/14 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
python如何通过protobuf实现rpc
2016/03/06 Python
Python基本语法经典教程
2016/03/11 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
python实现顺时针打印矩阵
2019/03/02 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
绩效工资分配方案
2014/01/18 职场文书
父母寄语大全
2014/04/12 职场文书
525心理健康活动总结
2015/05/08 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis