一个封装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 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 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
php输出表格的实现代码(修正版)
2010/12/29 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
javascript函数自动执行常用方法汇总
2016/03/28 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
python定时器使用示例分享
2014/02/16 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
详谈python read readline readlines的区别
2017/09/22 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
解决DataFrame排序sort的问题
2018/06/07 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
python实现根据文件格式分类
2019/10/31 Python
Android面试题及答案
2015/09/04 面试题
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
大学生村官任职感言
2014/01/09 职场文书
客户表扬信范文
2014/01/10 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers