如何使用jQuery制作展开和折叠切换面板

作者：大漠 日期：2011-09-27 点击：2541
accordion

在这节中，我们主要来学习如何使用jQuery的.slideToggle()方法来制作显示和折叠的切换面板。当你点击标题时，与其相对应的相邻的主内容将会显示，当你在次点击此标题时，其对应的主内容又将会折叠起来。如下图所示：

实现上面的效果，对于jQuery来说是一件非常容易的事情，下面我们就一起看如何实现上图所展示的效果。

HTML Code

我们先来看看HTML Code

			<div id="msgList" class="msgList">
				<p class="msgHead">Header-1</p>
				<div class="msgBody">orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
				<p class="msgHead">Header-2</p>
				<div class="msgBody">orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
				<p class="msgHead">Header-3</p>
				<div class="msgBody">orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
				<p class="msgHead">Header-4</p>
				<div class="msgBody">orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
			</div>

下如你上面看到的HTML结构，把所有消息列表整个放在了“div#msgList”中。而消息列表依次是一个标题“p.msgHead”和一个消息主内容“div.msgBody”，并且这两者是相互对应的。因为我们要实现的功能是“当你点击了消息的头部的类【“.msgHead”】后，与其对应的消息主内容的类【“.msgBody”】就会展示，当你在一次点击时其对应的主内容将折叠起来。”

CSS Code

结构清晰后，我们在来给其加上一点样式，增加其外观的美化效果。

			/*基本样式*/
			.msgList {
				margin: 0 0 15px 0;
				padding: 0;
				width: 200px;
			}
			
			.msgHead{
				padding: 5px 10px;
				cursor: pointer;
				position: relative;
				background-color: #fcc;
				margin: 1px;
			}
			.msgBody {
				padding: 5px 10px 15px;
				background-color: #f4f4f8;
			}
			/*三角标志样式*/
			.slideUp,
			.slideDown {
				position: absolute;
				width: 0px; height: 0px;
				border: 5px solid #000;
				border-color: #fff #fcc #fcc;
				background: black;
				right : 10px;
				bottom: 5px;
			}
			.slideUp {
				border-color: #fcc #fcc #fcc #fff;
				bottom: 6px;
				right: 5px;
			}

jQuery Code

到此，消息列表都美化好了，接下来主要看如何使用jQuery来实现前面所述的展开与折叠功能。

			<script type="text/javascript" src="../js/jquery.min.js"></script>
			<script type="text/javascript">
				$(document).ready(function(){
					//隐藏所有消息主体内容
					$('.msgBody').hide();
					//插入span标签用来制作三角标志
					$('<span class="slideDown">').appendTo('.msgHead');
					//点击标题相对应的内容展开，再次点击后折叠
					$('.msgHead').click(function(){
						$(this).children('span').toggleClass('slideDown slideUp').end().next('.msgBody').slideToggle(600);
					});			
				});
			</script>

实现效果我们主要通过以下几步实现的：

  1. 调入jQuery版本库：大家都知道在使用jQuery来制作效果，我们第一步都需要调入jQuery的版本库；
  2. 隐藏主内容：接着在页面载入时，首先将消息主内容“.msgBody”折叠起来（其实就是隐藏起来），如【$('.msgBody').hide();】
  3. 插入制作“三角形”标签：这里我们通过的是使用jQuery的“.appendTo()”方法在标题“.msgHead”插入制作三角形的html标签，如：【$('<span class="slideDown">').appendTo('.msgHead');】
  4. 实现展开和折叠功能：这里我们主要使用了jQuery中的“.slideToggle()”来实现点击标题“.msgHead”后,与其对应的主体内容“.msgBody”会展开，再次点击后将折叠。

这里我们还使用了jQuery中的其他几个方法，比如说“.children()”方法用来寻找“.msgHead”的子元素；“.toggleClass()”方法用来切换制作三角标签的类名；而且还使用了“.end()”和“.next()”等方法。

实现这种展开和折叠的效果，我们不仅仅只有一个jQuery中的“.slideToggle()”实现，还有一个“.toggle()”函数来实现。具体代码如下：

			<script type="text/javascript">
				$(document).ready(function(){
					//隐藏所有消息主体内容
					$('.msgBody').hide();
					//插入span标签用来制作三角标志
					$('<span class="slideDown">').appendTo('.msgHead');
					//点击标题相对应的内容展开，再次点击后折叠
					$('.msgHead').toggle(function(){
						$(this).children('span').removeClass('slideDown').addClass('slideUp').end().next('.msgBody').slideDown(600);
					},function(){
						$(this).children('span').removeClass('slideUp').addClass('slideDown').end().next('.msgBody').slideUp(600);
					});
				});
			</script>

虽然“.toggle()”和“.slideToggle()”都能实现开头展示的效果，但二者之间还是有所区别，致于有何区别，大家可以观注本站的更新，到时将呈现其二者的相同和区别之处。

通过上面的代码，使用jQuery来制作展开和折叠的切换面板是不是很容易呀，大家要是对这个感兴趣的话，可以点击由Roshan Bhattarai's Blog提供的在线DEMO。如果大家对这个还有更好的方法，或者有更精简的代码，欢迎一起交流和学习，也可以直接在评论中给我留。谢谢大家的观注和支持。

如需转载烦请注明出处：W3CPLUS

返回顶部