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.vevb.com/</div>

</body>

</html>