一个封装js代码-----展开收起效果示例
2013-07-03 00:00
555 查看
第一次靠自己完整的封装的小特效,有点小小的兴奋,和大家分享下,希望能对和我一样在探索的童鞋们有点帮助
js部分:
html 引用:
PS:记住引用jQuery的框架,兼容ie6以上,火狐,谷歌,ie6没有测试大家可以自己测试
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没有测试大家可以自己测试
相关文章推荐
- 一个封装js代码-----展开收起效果示例
- 我的第一个封装js代码-----展开收起效果
- 列表代码我的第一个封装js代码-----展开收起效果
- 自己写了一个展开和收起的多更能型的js效果
- 自己写了一个展开和收起的多更能型的js效果
- 用Objective_C / swift写一个QQ分组(展开收起)的效果(附DEMO)
- vue和react等项目中更简单的实现展开收起更多等效果示例
- 如何实现js展开收起(折叠)效果呢?例如:一段内容过长了,我限制他显示为20个字内,但是超出了20的就先用省略号代替,然后后面添加一个展开,点击展开后就显示所有的内容,这时候展开按钮就变成了 折叠按钮
- 自己写了一个展开和收起的js效果...分享给大家
- 一个简单的全屏图片上下打开显示网页效果示例
- 内容的展开与收起效果
- Adroid 展开收起效果实现
- javascript 封装的一个实用的焦点图切换效果
- 一个伸缩效果,把innerHTML=="展开"中的...
- js 展开/收起效果
- 一个Android实现图片的倒影效果的代码示例
- 文章收起与展开效果的实现
- JS实现运动缓冲效果的封装函数示例
- 在datagrid里实现文章内容在点击标题的时候收起或者展开的效果