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="../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，并修改值
            });
        })

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

标签：

原文地址：http://blog.csdn.net/adgjlxxx/article/details/44039001