jQuery實現伸展與合攏panel的方法

2024-05-06 16:19:02

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jQuery實現伸展與合攏panel的方法,可實現操作div層的平滑收縮與展開的功能,涉及jQuery中next、slideUp、slideDown等方法的使用技巧,非常簡單實用,需要的朋友可以參考下

本文實例講述了jQuery實現伸展與合攏panel的方法。分享給大家供大家參考。具體實現方法如下：

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>jQuery伸展與合攏的Panel演示</title>

<style type="text/css">

*{margin:0;padding:0;}

body { font-size: 13px; line-height: 130%; padding: 60px }

#panel { width: 300px; border: 1px solid #0050D0 }

.head { padding: 5px; background: #96E555; cursor: pointer }

.content { padding: 10px; text-indent: 2em;

border-top: 1px solid #0050D0;display:block;

}

</style>

<script src="jquery-1.6.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

$("#panel h5.head").toggle(function(){

$(this).next("div.content").slideUp();

},function(){

$(this).next("div.content").slideDown();

})

})

</script>

</head>

<body>

<div id="panel">

<h5 class="head">點擊這里</h5>

<div class="content">

展開和收起的內容！展開和收起的內容！展開和收起的內容！

展開和收起的內容！展開和收起的內容！展開和收起的內容！

展開和收起的內容！展開和收起的內容！

</div>

</div>

<div>http://www.survivalescaperooms.com/</div>

</body>

</html>