一个封装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实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
学习javascript文件加载优化
Feb 19 Javascript
js数组去重的hash方法
Dec 22 Javascript
微信小程序开发探究
Dec 27 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
js中getter和setter用法实例分析
Aug 14 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
Ajax实现页面无刷新留言效果
Mar 24 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
领悟php接口中interface存在的意义
2013/06/27 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
PHP类型约束用法示例
2016/09/28 PHP
可输入的下拉框
2006/06/19 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
js实现的切换面板实例代码
2013/06/17 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
详解React中的组件通信问题
2017/07/31 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
python3实现弹弹球小游戏
2019/11/25 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
python学生信息管理系统实现代码
2019/12/17 Python
关于python 跨域处理方式详解
2020/03/28 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
python飞机大战游戏实例讲解
2020/12/04 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
什么是网络协议
2016/04/07 面试题
销售业务员岗位职责
2014/01/29 职场文书
端午节活动策划方案
2014/03/09 职场文书
工作决心书范文
2014/03/11 职场文书
七一建党日演讲稿
2014/09/05 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
Nginx实现会话保持的两种方式
2022/03/18 Servers