一个封装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 相关文章推荐
JS启动应用程序的一个简单例子
May 11 Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
js控制input输入字符解析
Dec 27 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
mysql5写入和读出乱码解决
2006/11/25 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
PDO::errorCode讲解
2019/01/28 PHP
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
这样回答继承可能面试官更满意
2019/12/10 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
班主任工作经验材料
2014/02/02 职场文书
六个一活动实施方案
2014/03/21 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
《窃读记》教学反思
2016/02/18 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
nginx静态资源的服务器配置方法
2022/07/07 Servers