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,并修改值
            });
        })





郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。