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