一個(gè)封裝js代碼-----展開收起效果示例
更新時(shí)間:2013年07月03日 15:48:43 作者:
本文為大家介紹下一個(gè)封裝展開收起效果js代碼;引用jQuery的框架,兼容ie6以上,火狐,谷歌,ie6沒有測(cè)試大家可以自己測(cè)試
第一次靠自己完整的封裝的小特效,有點(diǎn)小小的興奮,和大家分享下,希望能對(duì)和我一樣在探索的童鞋們有點(diǎn)幫助
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沒有測(cè)試大家可以自己測(cè)試
js部分:
復(fù)制代碼 代碼如下:
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 引用:
復(fù)制代碼 代碼如下:
$(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沒有測(cè)試大家可以自己測(cè)試
相關(guān)文章
使用Javascript和DOM Interfaces來處理HTML
使用Javascript和DOM Interfaces來處理HTML...2006-10-10JavaScript實(shí)現(xiàn)MIPS乘法模擬的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)MIPS乘法模擬的方法,實(shí)例分析了JavaScript實(shí)現(xiàn)MIPS乘法模擬的運(yùn)算技巧,需要的朋友可以參考下2015-04-04在小程序中集成redux/immutable/thunk第三方庫的方法
這篇文章主要介紹了在小程序中集成redux/immutable/thunk第三方庫的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08uniapp返回上一頁并實(shí)現(xiàn)刷新界面數(shù)據(jù)的完整代碼
從一個(gè)列表界面點(diǎn)擊新增按鈕,進(jìn)入新增元素的界面,然后新增之后返回列表界面,并刷新列表界面,下面小編給大家分享uniapp返回上一頁,并實(shí)現(xiàn)刷新界面數(shù)據(jù)的代碼,感興趣的朋友跟隨小編一起看看吧2024-04-04JS的遞增/遞減運(yùn)算符和帶操作的賦值運(yùn)算符的等價(jià)式
JS的遞增/遞減運(yùn)算符和帶操作的賦值運(yùn)算符的等價(jià)式...2007-12-12