一个封装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 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
input的focus方法使用
Mar 13 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
jquery中键盘事件小结
Feb 24 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
Aug 05 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
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
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
php和redis实现秒杀活动的流程
2019/07/17 PHP
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python 命令行非阻塞输入的小例子
2013/09/27 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
python如何读写json数据
2018/03/21 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
详解python中index()、find()方法
2019/08/29 Python
python创建n行m列数组示例
2019/12/02 Python
python django中8000端口被占用的解决
2019/12/17 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
利用python 下载bilibili视频
2020/11/13 Python
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
大学生冰淇淋店商业计划书
2014/01/14 职场文书
车间机修工岗位职责
2014/02/28 职场文书
经典婚礼主持词
2014/03/13 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
Jsonp劫持学习
2021/04/01 PHP