jQuery实现折叠效果

近来工作一直很忙，加之学业上也有好多事情需要处理，一直没腾出时间来发博，自己都觉得不太好意思了！！

废话就不多说了，我们直接进入正题。Div折叠，是我在实际工作中实现的一种效果。我想同行的朋友们也有可能会遇到实现这种效果的需求。先上个截图。

 

 

 

 

jQuery的出现，使得这种效果的实现变得很轻松，很简单，只需要少量的JS代码和CSS样式即可。

 

CSS代码

.accordion { padding: 4px; margin-left: auto; margin-bottom: 6px; border:solid 1px #6e8bde; background: #FFFFCC; height: auto; width: auto; } .accordion h3 { font-size: 12px; font-weight:bold; padding-left: 20px; text-align: left; background: url(../images/plus.gif) no-repeat 2px; } .accordion h3.active { font-size: 12px; font-weight:bold; padding-left: 20px; text-align: left; background: url(../images/minus.gif) no-repeat 2px; } .accordion p { padding-left: 3px; padding-top: 2px; margin-left: 6px; margin-right: 6px; border: dashed 1px gray; }

 

accordion是整个可折叠的DIV的样式

.accordion h3是折叠后的标题样式

.accordion h3.active是被展开的标题样式

.accordion p 是可折叠区域的文本样式

 

JavaScript代码

$(".accordion h3:first").addClass("active"); $(".accordion p:not(:first)").hide(); $(".accordion h3").click(function(){ $(this).next("p").slideToggle("fast").siblings("p:visible").slideUp("fast"); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); });

 

这段代码首先去寻找样式为accordion的DIV下的第一个H3标记，并为其添加样式active，然后将除第一个以外的所有P标记隐藏起来。最后为每个一H3标记绑定单击事件，实现折叠与展开的效果。

 

HTML代码

<div class="accordion" style="width: 500px;"> <h3>折叠标题1</h3> <p>内容1</p> <h3>折叠标题2</h3> <p>内容2</p> <h3>折叠标题3</h3> <p>内容3</p> </div>

 

 

 

 

 

 

 

 

版权声明：本文为博主原创文章，未经博主允许不得转载。