一个封装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 相关文章推荐
JQuery jsonp 使用示例代码
Aug 12 Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
Js经典案例的实例代码
May 10 Javascript
修改npm全局安装模式的路径方法
May 15 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
详解用async/await来处理异步
Aug 28 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 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中文验证码实现示例分享
2014/01/12 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
PHP中的表达式简述
2016/05/29 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
python中随机函数random用法实例
2015/04/30 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
金讯Java笔试题目
2013/06/18 面试题
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
大学生村官任职感言
2014/01/09 职场文书
幼教求职信
2014/03/12 职场文书
2014年度思想工作总结
2014/11/27 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
经理岗位职责范本
2015/04/15 职场文书
计划生育目标责任书
2015/05/09 职场文书
MySQL数据库表约束讲解
2022/06/21 MySQL