jquery实现多个gridview折叠展开效果

        在实际项目开发中，有时数据会有很多分类，我们可以采用用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="JavaScript/jquery-2.1.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $("input[id^='hidden_']").each(function() {

                if ($(this).val() == 0) {
                    var objid = $(this).attr('id').substr(7);

                    $('#div_' + objid).hide();

                    $('#jqshow_' + objid).show();
                    $('#jqhide_' + objid).hide();
                }
                else {
                    var objid = $(this).attr('id').substr(7);

                    $('#div_' + objid).show();

                    $('#jqshow_' + objid).hide();
                    $('#jqhide_' + objid).show();
                }
            });

            $("img[id^='jqhide_']").click(function() {
                var objid = $(this).attr('id').substr(7);
                $(this).hide(); //向上折叠后，隐藏折叠按钮
                $('#jqshow_' + objid).show();
                $('#div_' + objid).slideUp();
                $('#hidden_' + objid).val(0);
            });
            $("img[id^='jqshow_']").click(function() {
                var objid = $(this).attr('id').substr(7);
                $(this).hide(); //向下展开后，隐藏展开按钮
                $('#jqhide_' + objid).show();
                $('#div_' + objid).slideDown();
                $('#hidden_' + objid).val(1);
            });           
            $("a[id^='jqlbtn_']").click(function() {
                var objid = $(this).attr('id').substr(7);
                $('#hidden_' + objid).val(1);
            });
        });  
   
    </script>