jQuery實(shí)現(xiàn)DIV層收縮展開的方法
更新時(shí)間：2015年02月27日 11:18:18 作者：代碼家園
這篇文章主要介紹了jQuery實(shí)現(xiàn)DIV層收縮展開的方法,實(shí)例分析了jQuery中toggle與animate等方法的使用技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)DIV層收縮展開的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery實(shí)現(xiàn)DIV層的收縮展開效果</title>
<script type="text/javascript" src="/images/jquery.js"></script>
<style>
/* 收縮展開效果 */
.text{line-height:22px;padding:0 6px;color:#666;}
.box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}
.box{position:relative;border:1px solid #e7e7e7;}
</style>
</head>
<body>
<script type="text/javascript">
// 收縮展開效果
$(document).ready(function(){
$(".box h1").toggle(function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
},function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
});
});
</script>
<!-- 收縮展開效果 -->
<div class="box">
<h1>收縮展開效果</h1>
<div class="text">
1<br />
2<br />
3<br />
4<br />
5<br />
</div>
</div>
<br />
<div class="box">
<h1>收縮展開效果</h1>
<div class="text">
1<br />
2<br />
</div>
</div>
<br>
<font color=red>第一次運(yùn)行請刷新一下頁面。</font>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery實(shí)現(xiàn)DIV層的收縮展開效果</title>
<script type="text/javascript" src="/images/jquery.js"></script>
<style>
/* 收縮展開效果 */
.text{line-height:22px;padding:0 6px;color:#666;}
.box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}
.box{position:relative;border:1px solid #e7e7e7;}
</style>
</head>
<body>
<script type="text/javascript">
// 收縮展開效果
$(document).ready(function(){
$(".box h1").toggle(function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
},function(){
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
});
});
</script>
<!-- 收縮展開效果 -->
<div class="box">
<h1>收縮展開效果</h1>
<div class="text">
1<br />
2<br />
3<br />
4<br />
5<br />
</div>
</div>
<br />
<div class="box">
<h1>收縮展開效果</h1>
<div class="text">
1<br />
2<br />
</div>
</div>
<br>
<font color=red>第一次運(yùn)行請刷新一下頁面。</font>
</body>
</html>
希望本文所述對大家的jquery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)DIV響應(yīng)鼠標(biāo)滑過由下向上展開效果示例【測試可用】
- jquery控制頁面的展開和隱藏實(shí)現(xiàn)方法(推薦)
- 基于jQuery實(shí)現(xiàn)下拉收縮(展開與折疊)特效
- jquery實(shí)現(xiàn)可點(diǎn)擊伸縮與展開的菜單效果代碼
- jquery實(shí)現(xiàn)點(diǎn)擊查看更多內(nèi)容控制段落文字展開折疊效果
- jQuery實(shí)現(xiàn)文本展開收縮特效
- jQuery實(shí)現(xiàn)表格展開與折疊的方法
- jquery實(shí)現(xiàn)先淡出再折疊收起的動畫效果
- jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起
- jQuery實(shí)現(xiàn)的頁面詳情展開收起功能示例
相關(guān)文章
jQuery中bind(),live(),delegate(),on()綁定事件方法實(shí)例詳解
這篇文章主要介紹了jQuery中bind(),live(),delegate(),on()綁定事件方法,結(jié)合實(shí)例形式詳細(xì)分析了bind(),live(),delegate(),on()方法綁定事件的具體使用技巧,并對比分析了四種方式的異同點(diǎn),需要的朋友可以參考下2016-01-01
Eclipse配置Javascript開發(fā)環(huán)境圖文教程
這篇文章主要介紹了Eclipse配置Javascript開發(fā)環(huán)境圖文教程,需要的朋友可以參考下2015-01-01
當(dāng)DOM載入就緒可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)，下面有個(gè)示例，不懂的朋友可以學(xué)習(xí)下2013-08-08
jquery實(shí)現(xiàn)限制textarea輸入字?jǐn)?shù)的方法
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)限制textarea輸入字?jǐn)?shù)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09![自定義一個(gè)jquery插件[鼠標(biāo)懸浮時(shí)候 出現(xiàn)說明label]](http://img.jbzj.com/images/xgimg/bcimg4.png)
自定義一個(gè)jquery插件[鼠標(biāo)懸浮時(shí)候 出現(xiàn)說明label]
自定義一個(gè)jquery插件，一個(gè)簡單的jquery.js,入門的jquery插件，jquery入門實(shí)例,jquery helloworld。2011-06-06
對于剛開始接觸jquery的朋友是個(gè)不錯學(xué)習(xí)參考，對于一些方法的使用也給出了說明。2011-06-06
jQuery基于ajax實(shí)現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法
這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法,結(jié)合實(shí)例形式較為詳細(xì)分析了jQuery結(jié)合ajax進(jìn)行表單登陸驗(yàn)證操作的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
在網(wǎng)頁上只有一個(gè)小區(qū)域，但是說明性的文字又很長，下面這段腳本實(shí)現(xiàn)的是長文字的部分顯示，有類似需求的朋友可以參考下哈，希望對你有所幫助2013-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery無縫輪播圖代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JQUERY 獲取IFrame中對象及獲取其父窗口中對象示例
經(jīng)常會用到iframe，難免會碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素，下面為大家簡單介紹下本人的使用心得2013-08-08