一个封装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入门教程(2) JS基础知识
Jan 31 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
详解webpack 多入口配置
Jun 16 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
Python restful框架接口开发实现
2020/04/13 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
世界汽车零件:World Car Parts
2019/09/04 全球购物
写好自荐信的几个要点
2013/12/26 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
数据保密承诺书
2014/06/03 职场文书
六查六看剖析材料
2014/10/06 职场文书
学校食堂管理制度
2015/08/04 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL