一个封装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 nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
js实现全选和全不选
Jul 28 Javascript
React自定义hook的方法
Jun 25 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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
PHP入门学习笔记之一
2010/10/12 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
python获取从命令行输入数字的方法
2015/04/29 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Python中的集合介绍
2019/01/28 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
工业设计专业推荐信
2013/10/29 职场文书
信息技术课后反思
2014/04/27 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
2014年关工委工作总结
2014/11/17 职场文书
建议书范文
2015/02/05 职场文书
重阳节慰问信
2015/02/15 职场文书
学校捐书倡议书
2015/04/27 职场文书
《叶问2》观后感
2015/06/15 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
python在package下继续嵌套一个package
2022/04/14 Python