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>

 

 

 

 

 

 

 

 

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