<!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. CodeForces 651C Watchmen map

    Watchmen are in a danger and Doctor Manhattan together with his friend Daniel Dreiberg should warn t ...

  2. MSM8974 fastboot烧写软件

    fastboot烧写是在aboot阶段做的,所以空板没有完整烧写aboot及其boot sequence前的image是没法使用fastboot的.在手机开机状态下,执行:        adb re ...

  3. BOM DOM

    http://www.cnblogs.com/yexiaochai/archive/2013/05/28/3102674.html DOM Document Object Model 文档对象模型 一 ...

  4. jquery之clone()方法详解

    clone()函数用于克隆当前匹配元素集合的一个副本,并以jQuery对象的形式返回.你也可以简单地理解为:克隆当前jQuery对象. 你还可以指定是否复制这些匹配元素(甚至它们的子元素)的附加数据( ...

  5. gitlab配置和搭建 ssh

    (1)查看自己之前是否生成过ssh密钥: cat ~/.ssh/id_rsa.pub 如果出现一段ssh-rsa开头的,表示已经生成了,可以跳过此步骤: (2)如果之前没有生成ssh密钥,使用命令: ...

  6. 测算Redis处理实际生产请求的QPS/TPS

    测算Redis处理实际生产请求的QPS/TPS Benchmark工具 redis发布版本中自带了redis-benchmark性能测试工具; 示例: 使用50个并发连接,发出100000个请求,每个 ...

  7. bzoj 2957: 楼房重建 线段树

    2957: 楼房重建 Time Limit: 10 Sec  Memory Limit: 256 MB[Submit][Status][Discuss] Description 小A的楼房外有一大片施 ...

  8. 概念学习（Concept Learning）

    从特殊的训练样例中归纳出一般函数是机器学习的核心问题.一般函数是对理想目标函数的函数逼近(function approximation).简而言之,从特殊到普通.与此对应的是演绎推理(deductiv ...

  9. Android 布局简要范例

    Android的布局决定着实际的UI界面呈现情况,正是这些UI界面的组合与千变万化,才呈现出了各式各样的风格. 而这些基础的布局框架结构很重要,需要玩的很熟悉.我将以前参考的部分代码示例,所做的相关实 ...

  10. Perl 中 Pod 的基本用法。

    1. Pod 语法 pod中用段分可以分为三种,普通段落,字面段落(Verbatim Paragraph)和命令段落.三者的区分非常简单,以=pod|head1|cut|over等指示字开始的段落为命 ...