js控制自动展开收缩、、、急急急！！！

本帖最后由 mjgsh 于 2011-04-02 13:53:39 编辑

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>testLi</title>
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <style>
    ul{
    list-style:none;
    }
        li {
            border: 1px solid #f0f;
        }
        
        .content {
         border:1px solid #ccc;
            display: none;
        }
    </style>
    <script text="text/javascript">
        $(function(){
            var dom = $("li .content");
            var i = 0;
            var len = $("li .content").length;        
            showNext(0);        
            function showNext(i){
                if (i >= len) {
                    i = 0;
                }
                dom.eq(i).slideDown(5000, function(){
                    dom.eq(i).slideUp(4000);
                    showNext(i+1)
                    i++;
                });
            }
        });
    </script>
    </head>
    <body>
        <ul>
            <li>
                <p>
                    1
                </p>
                <p class="content">
                    11111111111111111111111111111111111<br/>11111111111111111
                </p>
            </li>
            <li>
                <p>
                    2
                </p>
                <p class="content">
                    22222222222222222222222222222222222<br/>22222222222222222222
                </p>
            </li>
            <li>
                <p>
                    3
                </p>
                <p class="content">
                    3333333333333333333333333333333333<br/>3333333333333333333333
                </p>
            </li>
            <li>
                <p>
                    4
                </p>
                <p class="content">
                    4444444444444444<br/>4444444444444444444444<br/>4444444444444
                </p>
            </li>
     <li>
                <p>
                    5
                </p>
                <p class="content">
                    55555555555555<br/>555555555555555555555<br/>555555555555555555555555
                </p>
            </li>
            <li>
                <p>
                    6
                </p>
                <p class="content">
                    66666666666666666666<br/>66666666666666666<br/>66666666666666666
                </p>
            </li>
        </ul>
    </body>
    </html>