一个封装js代码-----展开收起效果示例
一个封装js代码-----展开收起效果示例
发布时间:2016-12-30 来源:查字典编辑
摘要:第一次靠自己完整的封装的小特效,有点小小的兴奋,和大家分享下,希望能对和我一样在探索的童鞋们有点帮助js部分:复制代码代码如下:varsho...

第一次靠自己完整的封装的小特效,有点小小的兴奋,和大家分享下,希望能对和我一样在探索的童鞋们有点帮助

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><span>我有列表</span><a>+</a></div>

<p>

<a href="#">列表1</a>

<a href="#">列表2</a>

<a href="#">列表3</a>

</p>

</li>

<li>

<div><span>我有列表</span><a>+</a></div>

<p>

<a href="#">列表1</a>

<a href="#">列表2</a>

<a href="#">列表3</a>

</p>

</li>

<li>

<div><span>我没有列表</span></div>

</li>

</ul>

PS:记住引用jQuery的框架,兼容ie6以上,火狐,谷歌,ie6没有测试大家可以自己测试

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类