jQuery實現(xiàn)DIV層收縮展開的方法
本文實例講述了jQuery實現(xiàn)DIV層收縮展開的方法。分享給大家供大家參考。具體實現(xiàn)方法如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery實現(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>第一次運行請刷新一下頁面。</font>
</body>
</html>
希望本文所述對大家的jquery程序設(shè)計有所幫助。
- jQuery實現(xiàn)DIV響應(yīng)鼠標(biāo)滑過由下向上展開效果示例【測試可用】
- jquery控制頁面的展開和隱藏實現(xiàn)方法(推薦)
- 基于jQuery實現(xiàn)下拉收縮(展開與折疊)特效
- jquery實現(xiàn)可點擊伸縮與展開的菜單效果代碼
- jquery實現(xiàn)點擊查看更多內(nèi)容控制段落文字展開折疊效果
- jQuery實現(xiàn)文本展開收縮特效
- jQuery實現(xiàn)表格展開與折疊的方法
- jquery實現(xiàn)先淡出再折疊收起的動畫效果
- jQuery使用slideUp方法實現(xiàn)控制元素緩慢收起
- jQuery實現(xiàn)的頁面詳情展開收起功能示例
相關(guān)文章
jQuery中bind(),live(),delegate(),on()綁定事件方法實例詳解
這篇文章主要介紹了jQuery中bind(),live(),delegate(),on()綁定事件方法,結(jié)合實例形式詳細分析了bind(),live(),delegate(),on()方法綁定事件的具體使用技巧,并對比分析了四種方式的異同點,需要的朋友可以參考下2016-01-01Eclipse配置Javascript開發(fā)環(huán)境圖文教程
這篇文章主要介紹了Eclipse配置Javascript開發(fā)環(huán)境圖文教程,需要的朋友可以參考下2015-01-01jquery實現(xiàn)限制textarea輸入字數(shù)的方法
這篇文章主要為大家詳細介紹了jquery實現(xiàn)限制textarea輸入字數(shù)的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09自定義一個jquery插件[鼠標(biāo)懸浮時候 出現(xiàn)說明label]
自定義一個jquery插件,一個簡單的jquery.js,入門的jquery插件,jquery入門實例,jquery helloworld。2011-06-06jQuery基于ajax實現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法
這篇文章主要介紹了jQuery基于ajax實現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法,結(jié)合實例形式較為詳細分析了jQuery結(jié)合ajax進行表單登陸驗證操作的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-02-02JQUERY 獲取IFrame中對象及獲取其父窗口中對象示例
經(jīng)常會用到iframe,難免會碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素,下面為大家簡單介紹下本人的使用心得2013-08-08