在实际项目开发中，有时数据会有很多分类，我们可以采用用gridview来显示数据分类，当数据量很大的情况下，一个页面会被一个分类占据，但我们想看看其他分类的话就必须向下滑动鼠标，现在我们使用jquery来实现分类的折叠和展开效果.
这样当我们想看后面的分类时，可以把前面的分类进行折叠，具体做法是在每一个gridview上面加入一个div和hidden，其中hidde的值保存的是这个div隐藏或显示的值（如0、1），在每一个img按钮上面加入class，显示的按钮加入class="group_show"，隐藏的按钮加入class="group_hide"，这样单击任何一个按钮都会触发click事件，在click事件中把hidden的值进行相应的修改，一开始的时候，通过遍历hidden的值来判断div是否显示。
代码如下：
<script type="text/javascript" src="../js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div#main input:hidden").each(function() {
if ($(this).val() == "0") {
var divid = ‘div_‘ + $(this).attr(‘id‘);
$(‘#‘ + divid).hide();
}
else {
var divid = ‘div_‘ + $(this).attr(‘id‘);
$(‘#‘ + divid).show();
}
});
$(‘img.group_hide‘).click(function() {
$(‘#div_result‘).fadeOut(1000); //需要自己处理找到相应的div
$(‘#result‘).val(0); //同理需要找到hidden，并修改值
});
$(‘img.group_show‘).click(function() {
$(‘#div_result‘).fadeIn(1000); //需要自己处理找到相应的div
$(‘#result‘).val(1); //同理需要找到hidden，并修改值
});
})