一个封装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 相关文章推荐
很可爱的输入框
Aug 03 Javascript
javascript 设置文本框中焦点的位置
Nov 20 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
uni-app从安装到卸载的入门教程
May 15 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
ASP知识讲座四
2006/10/09 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
jQuery的css() 方法使用指南
2015/05/03 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
机器学习python实战之手写数字识别
2017/11/01 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
Django 外键的使用方法详解
2019/07/19 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
Python进行统计建模
2020/08/10 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
高中生家长寄语大全
2014/04/03 职场文书
工作会议方案
2014/05/21 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
实习感想范文
2015/08/10 职场文书
周一问候语大全
2015/11/10 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
学习心得体会
2019/06/20 职场文书
golang使用map实现去除重复数组
2022/04/14 Golang