一個(gè)封裝js代碼-----展開收起效果示例
更新時(shí)間：2013年07月03日 15:48:43 作者：
本文為大家介紹下一個(gè)封裝展開收起效果js代碼;引用jQuery的框架，兼容ie6以上，火狐，谷歌，ie6沒有測試大家可以自己測試
第一次靠自己完整的封裝的小特效，有點(diǎn)小小的興奮，和大家分享下，希望能對和我一樣在探索的童鞋們有點(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沒有測試大家可以自己測試
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沒有測試大家可以自己測試
相關(guān)文章
JScript 8.0 VBArray 對象 提供對 Visual Basic 安全數(shù)組的訪問。2008-05-05
本文主要介紹了uniapp中修改打包路徑,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
遍歷所有樣式屬性，通過判斷其屬性值，是否為'undefined' 或特特的值，來過慮屬性2012-09-09
js實(shí)現(xiàn)輪播圖效果 z-index實(shí)現(xiàn)輪播圖
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
本文主要介紹了three.js的基礎(chǔ)知識。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
這個(gè)例子,首先是把SPAN里的內(nèi)容用display:none;干掉,就是不顯示; 然后在A:HOVER時(shí),再把SPAN里的內(nèi)容display:block; 就是顯示出來;同時(shí)定義一下SPAN的位置; 其它代碼很簡單,但有人說看不太懂;我就簡單說一下;2008-06-06
任何一對花括號中的語句集都屬于一個(gè)塊，在這之中定義的所有變量在代碼塊外都是不可見的，我們稱之為塊級作用域2014-09-09
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳文件添加和刪除文件選擇框 ,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
DOM作用:用來修改網(wǎng)頁內(nèi)容,結(jié)構(gòu)和樣式,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章帶你吃透JavaScript中的DOM知識及用法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
JS實(shí)現(xiàn)定時(shí)頁面彈出類似QQ新聞的提示框
類似QQ新聞的提示框要求頁面每隔半小時(shí)彈出一次提示消息，下面有個(gè)不錯(cuò)的實(shí)現(xiàn)方法，感興趣的朋友可以參考下2013-11-11