jQuery实现伸展与合拢panel的方法
更新时间：2015年04月30日 09:47:48 作者：休闲生活文化
这篇文章主要介绍了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>https://www.jb51.net/</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
本文主要介绍了实现点击下箭头变上箭头来回切换的两种方法，具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
当客户端用户切换输入法至全角时可能您的表单提交会有漏洞哦！不过事实上js有这功能 可以将其转换为非全角字符！2009-07-07
用户输入一个表单，输入准考证和验证码，验证用户是否输入表单，点击查询提交，然后从服务器得到返回的数据并显示出来2012-10-10
这篇文章主要介绍了jQuery中before()方法用法,以实例形式分析了before()方法的功能、定义与具体使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
jQuery 学习第六课 实现一个Ajax的TreeView
TreeView是asp.net自带的控件，不过自带的控件在灵活性上有诸多限制。在jQuery的帮助下，自己实现一个TreeView也不困难。本文是前几篇文章所讲内容的一个综合演练。2010-05-05
这篇文章主要介绍了用jQuery toggleClass 实现鼠标移上变色,需要的朋友可以参考下2014-05-05
听朋友说要作个九宫格，我也就随便写一个，等待完善2012-08-08
jquery下为Event handler传递动态参数的代码
在jquery cook book里看到一篇给event handler传递动态参数的文章 感觉挺实用的 跟大家分享下2011-01-01
jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。2011-01-01
jQuery用unbind方法去掉hover事件及其他方法介绍
jquery怎么去掉hover以为直接unbind(hover)就可以搞定，结果很失败，接下来介绍下取消hover事件的多种方法，感兴趣的你可以参考下哈2013-03-03
最新评论