一个封装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 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
document.getElementById获取控件对象为空的解决方法
Nov 20 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
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 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
angular2使用简单介绍
2016/03/01 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python 捕获shell脚本的输出结果实例
2017/01/04 Python
python实现图片转字符小工具
2019/04/30 Python
python读写配置文件操作示例
2019/07/03 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
关于赌博的检讨书
2014/01/24 职场文书
人事专员职责
2014/02/22 职场文书
机械专业求职信
2014/05/25 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
拾金不昧表扬信
2015/01/16 职场文书
婚宴来宾致辞
2015/07/28 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript