<!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. 看懂UML类图和时序图

    看懂UML类图和时序图 这里不会将UML的各种元素都提到,我只想讲讲类图中各个类之间的关系: 能看懂类图中各个类之间的线条.箭头代表什么意思后,也就足够应对 日常的工作和交流: 同时,我们应该能将类图 ...

  2. MySQL中别名的使用

    MySQL中别名的使用 为数据列或者表达式起别名时,别名紧跟数据列,中间以空格隔开,或者用关键字as隔开. #为表达式起别名 使用as关键字隔开 as T_ID from teacher_table; ...

  3. 将XML文件中的内容转换为Json对象

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Xml;u ...

  4. C#读写本地ini

    //读写INI public class GF_INI { [DllImport("kernel32")] private static extern long WritePriv ...

  5. BZOJ 3752 世界树

    题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3572 题意:给出一棵树.若干询问.每个询问给出m个点,输出每个点管辖的点的个数.x ...

  6. Datatable分页

    using System; using System.Collections.Generic; using System.Web; using System.Data; /// <summary ...

  7. left join 等连接查询遇到同名字段覆盖问题

    可以在查询时给字段赋别名,但是需要注意以下:*的位置要在最前面,放在其他地方都会出错.这种写法同名覆盖的字段还在,然后在*的后面加上别名字段,已经可以满足所有需求了 SELECT *,r.id as ...

  8. Trigger Execution Sequence Of Oracle Forms

    Sequence of triggers fires on Commit.1.  KEY Commit2.  Pre Commit3.  Pre/On/Post Delete4.  Pre/On/Po ...

  9. Excel2003命令栏操作

    Excel2003个人觉得应该把它抛掉不管了,但还是没忍住想看下它里面的东东. 一.先列出一些重要对象 Commandbars:命令栏集合                                ...

  10. 数据引用Data References

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...