jQuery实现伸展与合拢panel的方法

更新时间：2026-02-18 19:39:22作者：zhao

本文实例讲述了jQuery实现伸展与合拢panel的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery伸展与合拢的Panel演示</title>

*{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>

$(function(){

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

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

},function(){

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

})

</script>

</head>

<body>

展开和收起的内容！展开和收起的内容！展开和收起的内容！

展开和收起的内容！展开和收起的内容！

</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

手游推荐