一个封装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查看html源文件
Nov 08 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
让table变成exls的示例代码
Mar 24 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
May 19 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
javascript伸缩型菜单实现代码
Nov 16 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 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 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
使用php实现截取指定长度
2013/08/06 PHP
php字符串过滤与替换小结
2015/01/26 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
jquery基本选择器匹配多个元素的实现方法
2016/09/05 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
使用JS动态显示文本
2017/09/09 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
python使用RNN实现文本分类
2018/05/24 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
jupyter notebook清除输出方式
2020/04/10 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
副总经理岗位职责
2014/03/16 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
体育专业自荐书
2014/05/29 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
师德师风自查材料
2014/10/14 职场文书
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers
Go语言grpc和protobuf
2022/04/13 Golang
Java Spring读取和存储详细操作
2022/08/05 Java/Android