一个封装js代码-----展开收起效果示例
2023-06-13 09:15:02 时间
第一次靠自己完整的封装的小特效,有点小小的兴奋,和大家分享下,希望能对和我一样在探索的童鞋们有点帮助
js部分:
复制代码代码如下:
js部分:
varshow_obj=function(obj,at,ob){
$(obj).bind("click",function(){
varshowTxt=$(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_showa",".p-silde");
})
html代码:
<ul>
<li>
<divclass="clearfixslide_show"><spanstyle="float:left">我有列表</span><astyle="float:right">+</a></div>
<pclass="p-silde"style="display:none">
<ahref="#">列表1</a>
<ahref="#">列表2</a>
<ahref="#">列表3</a>
</p>
</li>
<li>
<divclass="clearfixslide_show"><spanstyle="float:left">我有列表</span><astyle="float:right">+</a></div>
<pclass="p-silde"style="display:none">
<ahref="#">列表1</a>
<ahref="#">列表2</a>
<ahref="#">列表3</a>
</p>
</li>
<li>
<divclass="clearfixslide_show"><span>我没有列表</span></div>
</li>
</ul>
PS:记住引用jQuery的框架,兼容ie6以上,火狐,谷歌,ie6没有测试大家可以自己测试
相关文章
- js面试题及答案2020_JS面试题大全
- js操作日期基本格式
- php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码[通俗易懂]
- Js生成二维码_js在线生成二维码
- 用原生JS对AJAX做简单封装详解编程语言
- 快速掌握JS操作MySQL数据库技巧(js操作mysql数据库)
- 利用 JS 实现 Redis 的连接(js连接redis)
- 用SQL Server和JS实现数据库管理技术(sqlserver.js)
- 使用JS操作Oracle数据库探索潜在可能性(js和oracle数据库)
- js+FSO遍历文件夹下文件并显示
- 用js实现的打字效果的带链接的新闻标题
- javascript延时重复执行函数lLoopRun.js
- JS类的封装及实现代码
- js数据验证集合、jsemail验证、jsurl验证、js长度验证、js数字验证等简单封装
- 工作中常用到的JS表单验证代码(包括例子)
- js操作textarea方法集合封装(兼容IE,firefox)
- js静态动态成员and信息的封装和隐藏
- js判断是否为数组的函数:isArray()
- JS简单动画封装浅析
- js封装cookie操作的函数代码
- js模式窗口(模式对话框和非模式对话框)的使用介绍
- 微信JS接口汇总及使用详解
- 封装好的js判断操作系统与浏览器代码分享
- 引用其它js时如何同时处理多个window.onload事件