一个封装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 相关文章推荐
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
原生JavaScript写出Tabs标签页的实例代码
Jul 20 Javascript
JS图片懒加载技术实现过程解析
Jul 27 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 Javascript
html实现随机点名器的示例代码
Apr 02 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代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
列表内容的选择
2006/06/30 Javascript
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
Python isinstance函数介绍
2015/04/14 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
一套C#面试题
2013/10/09 面试题
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
集结号观后感
2015/06/08 职场文书
Python中22个万用公式的小结
2021/07/21 Python
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
win7配置本地ftp服务器的图文教程
2022/08/05 Servers