如何使用jQuery制作手风琴效果

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

上回在《如何使用jQuery制作展开和折叠切换面板》中介绍了如何使用jQuery的“.slideToggle”或“toggle(function)”来制作展开和折叠面板效果。今天主要在上文的基础上来使用jQuery来制作一个手风琴效果。手风琴的效果就是在我们上文中的展开与折叠效果上的基础上增加了一点特效。就是当你点击一个窗格展开,而同时其他的窗格折叠,具体效果可以点下面DEMO所示效果:

目标

今天我们的目标是制作如上面DEMO所示的两种手风琴效果,第一种是“click”的手风琴效果,第二种是“hover”状态下的手风琴效果。

HTML Markup

先写HTML结构,直接把《如何使用jQuery制作展开和折叠切换面板》的HTML代码copy过来了,只是我们此处是两种效果,另外增加了两个div来区分他们,我暂且将他们叫做“msgListClick”和“msgListHover”具体可以参考下面的代码:

			<div id="msgListClick" 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
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/blog/151.html

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

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