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

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

在这节中,我们主要来学习如何使用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

Air Max 1 Ultra Flyknit

如需转载,烦请注明出处:https://www.w3cplus.com/jquery/how-to-create-expand-collapse-toggle-panel-with-jquery

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部