<!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>

jq手风琴---点击时列表的左边距逐渐减小的更多相关文章

  1. 用纯JS实现，点击一个列表时，输出对应的索引（不能用JQuery哦）

    你运行一下代码会发现,无论你点击哪个列表,控制台都是输出10.这是因为var声明的变量是函数作用域的,而不是块级作用域的.也就是说,for循环10次,每次都是改变同一个i,所以它的值会从0一直加到10 ...

  2. jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...

  3. css：url链接去下划线+点击前黑色+点击时灰色+点击后黑色

    一般的文章列表 加了样式之后的效果 附上css代码 /*点击前*/ a:link{ color: black; } /*点击后*/ a:visited{ color: black; } /*点击时*/ ...

  4. HTML实现点击时的阴影(:active)（已解决iOS微信上无法使用）

    一般是用这个委类:active 参考:http://www.w3school.com.cn/cssref/selector_active.asp 但是业界上实现的效果中,今日头条的手机端网页却不是这样 ...

  5. 如何消除移动端a标签点击时的蓝色底色以及a标签link、visited、hover、active的顺序

    1.消除a标签移动端点击时的蓝色底色 -webkit-tap-highlight-color:transparent 2.link.visited.hover.active的顺序 a:link{tex ...

  6. 使用mx:Repeater在删除和添加item时列表闪烁

    使用mx:Repeater在删除和添加item时列表闪烁 不可能在用户界面上闪闪的吧,recycleChildren属性可帮助我们 recycleChildren属性==缓存,设为true就可以了 本 ...

  7. .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

    1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...

  8. 取消a标签在移动端点击时的背景颜色

    一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -m ...

  9. ios下，<input type="checkbox"> 点击时出现黑色块

    ios下,<input type="checkbox"> 点击时出现黑色块如下图 解决方法:

随机推荐

  1. Python3基础 type获取变量的类型

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  2. 高通平台点亮LCD个人总结

    点击打开链接 高通平台LCD模块大致分为两部分:KERNEL和LK.在进行点屏之前,应该认真查看LCD原理图,弄清楚LCD亮屏需要满足的条件和上电时序,同时可以跟LCD IC原厂拿到初始化代码. 首先 ...

  3. C#获取当前日期时间(转)

    我们可以通过使用DataTime这个类来获取当前的时间.通过调用类中的各种方法我们可以获取不同的时间:如:日期(2008-09-04).时间(12:12:12).日期+时间(2008-09-04 12 ...

  4. sql 自增字段的控制 hibernate注解的写法

    1 创建序列,新建了一个列作为主键 create sequence pbaseinfo INCREMENT BY 1 START WITH 1 NOMAXVALUE NOCYCLE NOCACHE; ...

  5. 9.Parameters

    1.Optional and Named Parameters calls these methods can optionally not specify some of the arguments ...

  6. CUBRID学习笔记 20 默认的并发规则

    默认的设置是ISOLATION LEVEL 3 语法 SET TRANSACTION ISOLATION LEVEL 3; 最笨.官网的图不错看图吧 session 1 session 2 ;auto ...

  7. Codeforces Round #287 (Div. 2) C. Guess Your Way Out! 思路

    C. Guess Your Way Out! time limit per test 1 second memory limit per test 256 megabytes input standa ...

  8. LTE Module User Documentation（翻译3）——仿真输出

    LTE用户文档 (如有不当的地方,欢迎指正!) 6 仿真输出 ns-3 LTE 模型当前支持输出 PHY, MAC, RLC 和 PDCP 级别的 Key Performance Indicators ...

  9. HttpClient的CircularRedirectException异常原因及解决办法

    HttpClient的CircularRedirectException异常原因及解决办法 这两天在使用我自己爬虫抓取网页的时候总是出现 org.apache.http.client.ClientPr ...

  10. poj1971Parallelogram Counting

    链接 越来越感觉到了数学的重要性!.. 这题本来用以斜率和长度为key值进行hash不过感觉很麻烦还TLE了.. 最后知道中点一样的话就可以组成平行四边形,初中数学就可以了.. #include &l ...