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)行請(qǐng)刷新一下頁面。</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)行請(qǐng)刷新一下頁面。</font>
</body>
</html>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)DIV響應(yīng)鼠標(biāo)滑過由下向上展開效果示例【測(cè)試可用】
- 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)先淡出再折疊收起的動(dòng)畫效果
- jQuery使用slideUp方法實(shí)現(xiàn)控制元素緩慢收起
- jQuery實(shí)現(xiàn)的頁面詳情展開收起功能示例
相關(guān)文章
jquery瀏覽器滾動(dòng)加載技術(shù)實(shí)現(xiàn)方案
Google閱讀器上有一個(gè)AJAX效果很不錯(cuò)，就是閱讀項(xiàng)目時(shí)不需要翻頁，瀏覽器滾動(dòng)條往下拉到一定位置時(shí)自動(dòng)加載新的一批項(xiàng)目進(jìn)來，一直到所有項(xiàng)目加載完為止。對(duì)于我來說再好不過了，因?yàn)槲液懿幌矚g翻頁，尤其是輸入頁碼再定位到頁。2014-06-06
這篇文章主要介紹了jQuery中DOM操作原則,結(jié)合實(shí)例形式分析了jQuery針對(duì)dom元素操作的四種常見原則,需要的朋友可以參考下2019-08-08
jquery處理頁面彈出層查詢數(shù)據(jù)等待操作實(shí)例
這篇文章主要介紹了jquery處理頁面彈出層查詢數(shù)據(jù)等待操作,實(shí)例分析了jquery實(shí)現(xiàn)等待效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jquery制作的彈窗提示窗口插件，包含多種模式。帶有回執(zhí)函數(shù)值的功能,需要的朋友可以參考下2014-03-03
本篇文章主要是對(duì)jQuery獲取(選中)單選,復(fù)選框,下拉框中的值的實(shí)現(xiàn)方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
在第一講中，已經(jīng)對(duì)JQuery做了入門級(jí)的介紹，我相信看過的網(wǎng)友都應(yīng)該知道怎么開始寫一個(gè)簡(jiǎn)單的JQuery程序了。首先是需要引入一個(gè)JQuery包，其次是根據(jù)JQuery的語法寫代碼就可以了。2010-07-07
為jQuery-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄獮閖Query-easyui的tab組件添加右鍵菜單功能的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
jQuery EasyUI中對(duì)表格進(jìn)行編輯的實(shí)現(xiàn)代碼
對(duì)表格進(jìn)行增刪改后一次性保存或回滾的發(fā)生相當(dāng)有用。參照官方的教程例子做了個(gè)用戶管理的小例子。2010-06-06
這篇文章主要為大家詳細(xì)介紹了jquery動(dòng)感漂浮導(dǎo)航菜單特效，菜單可以實(shí)現(xiàn)上下浮動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-08-08
JQuery 使用attr方法實(shí)現(xiàn)下拉列表選中
實(shí)現(xiàn)下拉列表選中的方法有很多，這篇文章主要介紹了JQuery 使用attr方法的具體實(shí)現(xiàn)，需要的朋友可以收藏下2014-10-10