一个封装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 splice()方法详解
Sep 22 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
canvas时钟效果
Feb 16 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 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 zend 相对路径问题
2009/01/12 PHP
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
js实现每日签到功能
2018/11/29 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
详解微信UnionID作用
2019/05/15 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
教你安装python Django(图文)
2013/11/04 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python使用matplotlib绘制热图
2018/11/07 Python
windows下python安装pip方法详解
2020/02/10 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
python 如何对logging日志封装
2020/12/02 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
当当网软件测试笔试题
2015/11/24 面试题
教师党员承诺书
2014/03/25 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
小学班主任事迹材料
2014/12/17 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
SpringBoot快速入门详解
2021/07/21 Java/Android
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers