jq手风琴---点击时列表的左边距逐渐减小

时间：2023-03-09 23:18:32
jq手风琴---点击时列表的左边距逐渐减小 
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin:0;padding:0;}

        ul{list-style:none;}

        .list{margin:50px;background:red}

        .list1>li{cursor:pointer;}

        .nav{padding-left:10px;background:goldenrod}

        .nav{display:none;}

        .nav li{background:green}

        .nav ul{display:none;}

    </style>

</head>

<body>

<div class="list">

    <ul class="list1">

        <li>

            菜单1

            <ul class="nav">

                <li>

                    菜单1-1

                </li>

                <li>菜单1-2</li>

                <li>菜单1-3</li>

                <li>菜单1-4</li>

                <li>菜单1-5</li>

                <li>菜单1-6</li>

            </ul>

        </li>

        <li>

            菜单2

            <ul class="nav">

                <li>菜单2-1</li>

                <li>菜单2-2</li>

                <li>菜单2-3</li>

                <li>菜单2-4</li>

                <li>菜单2-5</li>

                <li>菜单2-6</li>

            </ul>

        </li>

        <li>

            菜单3

            <ul class="nav">

                <li>菜单1</li>

                <li>菜单2</li>

                <li>菜单3</li>

                <li>菜单4</li>

                <li>菜单5</li>

                <li>菜单6</li>

            </ul>

        </li>

    </ul>

</div>

</body>

<script src="js/jquery-1.11.3.min.js"></script>

<script>

    $(".nav>li").each(function(){

        var $li=$(this).index();

        var step=10;

        $(this).css({"marginLeft":$li*step});

    });

    $(".list1>li").on("click",function(){

        if($(this).find(".nav").css("display")=="none"){

            $(this).find(".nav").slideDown();

            $(this).find(" .nav>li").animate({"marginLeft":0},1000)

        }else{

            $(this).find(".nav").slideUp();

            $(this).find(".nav>li").each(function(){

                var $li=$(this).index();

                var step=10;

                $(this).animate({"marginLeft":$li*step});

            });

        }

    });

</script>

</html>