<!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. Ubuntu安装后的一些配置

    对新安装的Ubuntu的一些配置: #移除无用包 apt-get remove libreoffice-common apt-get remove unity-webapps-common apt-g ...

  2. Android BroadcastReceiver广播接受者

    静态注册 配置清单表注册:只要曾经注册过哪怕关闭也能调用  方式一:sendBroadCastReceive   广播的步骤:       发送  无序广播,普通广播       (1).发送方    ...

  3. SqlSever基础 datalength函数 计算前后都有空格的字符串的长度

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

  4. 数据库SQL语句练习题5--9

    5. 查询Score表中成绩为85,86或88的记录. ,,) 6. 查询Student表中“95031”班或性别为“女”的同学记录. ' or ssex = '女' 7. 以Class降序查询Stu ...

  5. 04-23 Android 课堂笔记

    1.调用 //暂停 @Override protected void onPause() { super.onPause(); Log.e("TAG", "onPause ...

  6. CodeForces 313C Ilya and Matrix

    Ilya and Matrix Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Su ...

  7. HTTP消息中header头部信息的讲解

    HTTP Request的Header信息 1.HTTP请求方式 如下表: GET 向Web服务器请求一个文件 POST 向Web服务器发送数据让Web服务器进行处理 PUT 向Web服务器发送数据并 ...

  8. ASP.NET四则运算--工厂模式

    这次是在ASP.NET上实现四则运算,之前用策略模式实现了,所以这次想着用工厂模式实现一下. Calculator.cs using System; using System.Collections. ...

  9. CUBRID学习笔记 27 数据类型4

    范围比较 数字和字符串比较 字符串被转为double SELECT i FROM t WHERE i <= all {'11','12'}; i ============= 1 2 3 4 字符 ...

  10. iOS - TouchID 指纹识别

    前言 NS_CLASS_AVAILABLE(10_10, 8_0) @interface LAContext : NSObject 指纹识别功能是 iPhone 5s 推出的,SDK 是 iOS 8. ...