一个封装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实现des解密加密全过程
Apr 03 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
jQuery ajax应用总结
Jun 02 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
十天学会php(3)
2006/10/09 PHP
php的ddos攻击解决方法
2015/01/08 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
vue 优化CDN加速的方法示例
2018/09/19 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
python计算最大优先级队列实例
2013/12/18 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
python与pycharm有何区别
2020/07/01 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
医院检讨书范文
2014/02/01 职场文书
五分钟演讲稿
2014/04/30 职场文书
golang 实现并发求和
2021/05/08 Golang