jQuery實(shí)現(xiàn)DIV層收縮展開(kāi)的方法
本文實(shí)例講述了jQuery實(shí)現(xiàn)DIV層收縮展開(kāi)的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery實(shí)現(xiàn)DIV層的收縮展開(kāi)效果</title>
<script type="text/javascript" src="/images/jquery.js"></script>
<style>
/* 收縮展開(kāi)效果 */
.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">
// 收縮展開(kāi)效果
$(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>
<!-- 收縮展開(kāi)效果 -->
<div class="box">
<h1>收縮展開(kāi)效果</h1>
<div class="text">
1<br />
2<br />
3<br />
4<br />
5<br />
</div>
</div>
<br />
<div class="box">
<h1>收縮展開(kāi)效果</h1>
<div class="text">
1<br />
2<br />
</div>
</div>
<br>
<font color=red>第一次運(yùn)行請(qǐng)刷新一下頁(yè)面。</font>
</body>
</html>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)DIV響應(yīng)鼠標(biāo)滑過(guò)由下向上展開(kāi)效果示例【測(cè)試可用】
- jquery控制頁(yè)面的展開(kāi)和隱藏實(shí)現(xiàn)方法(推薦)
- 基于jQuery實(shí)現(xiàn)下拉收縮(展開(kāi)與折疊)特效
- jquery實(shí)現(xiàn)可點(diǎn)擊伸縮與展開(kāi)的菜單效果代碼
- jquery實(shí)現(xiàn)點(diǎn)擊查看更多內(nèi)容控制段落文字展開(kāi)折疊效果
- jQuery實(shí)現(xiàn)文本展開(kāi)收縮特效
- jQuery實(shí)現(xiàn)表格展開(kāi)與折疊的方法
- jquery實(shí)現(xiàn)先淡出再折疊收起的動(dòng)畫(huà)效果
- jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起
- jQuery實(shí)現(xiàn)的頁(yè)面詳情展開(kāi)收起功能示例
相關(guān)文章
jQuery中bind(),live(),delegate(),on()綁定事件方法實(shí)例詳解
這篇文章主要介紹了jQuery中bind(),live(),delegate(),on()綁定事件方法,結(jié)合實(shí)例形式詳細(xì)分析了bind(),live(),delegate(),on()方法綁定事件的具體使用技巧,并對(duì)比分析了四種方式的異同點(diǎn),需要的朋友可以參考下2016-01-01Eclipse配置Javascript開(kāi)發(fā)環(huán)境圖文教程
這篇文章主要介紹了Eclipse配置Javascript開(kāi)發(fā)環(huán)境圖文教程,需要的朋友可以參考下2015-01-01jquery實(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)說(shuō)明label]
自定義一個(gè)jquery插件,一個(gè)簡(jiǎn)單的jquery.js,入門(mén)的jquery插件,jquery入門(mén)實(shí)例,jquery helloworld。2011-06-06jQuery基于ajax實(shí)現(xiàn)頁(yè)面加載后檢查用戶登錄狀態(tài)的方法
這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)頁(yè)面加載后檢查用戶登錄狀態(tài)的方法,結(jié)合實(shí)例形式較為詳細(xì)分析了jQuery結(jié)合ajax進(jìn)行表單登陸驗(yàn)證操作的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-02-02jQuery實(shí)現(xiàn)長(zhǎng)文字部分顯示代碼
在網(wǎng)頁(yè)上只有一個(gè)小區(qū)域,但是說(shuō)明性的文字又很長(zhǎng),下面這段腳本實(shí)現(xiàn)的是長(zhǎng)文字的部分顯示,有類(lèi)似需求的朋友可以參考下哈,希望對(duì)你有所幫助2013-05-05JQUERY 獲取IFrame中對(duì)象及獲取其父窗口中對(duì)象示例
經(jīng)常會(huì)用到iframe,難免會(huì)碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素,下面為大家簡(jiǎn)單介紹下本人的使用心得2013-08-08