一个封装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 相关文章推荐
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
javascript之bind使用介绍
Oct 09 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
Nov 21 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
Nest.js 授权验证的方法示例
Feb 22 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
php5.x禁用eval的操作方法
2018/10/19 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
javascript数组去重方法汇总
2015/04/23 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
python logging日志模块的详解
2017/10/29 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
Python 读写文件的操作代码
2018/09/20 Python
python反编译学习之字节码详解
2019/05/19 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
教师一帮一活动总结
2014/07/08 职场文书
演讲稿开场白台词
2014/08/25 职场文书
单位介绍信格式范文
2015/05/04 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang