jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  //跳到ul的父元素，也就是id为div1的元素
.siblings()  //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

层级菜单

下面是最终的实现效果，如下：


jquery链式调用 - 层级菜单示例_jquery


那么下面来逐步编写，首先将静态页面先写出来，如下：


jquery链式调用 - 层级菜单示例_jquery_02


使用​​ul>(li>a{水果}+(ul>li{苹果}*3))*5​​按Tab键，就可以快速生成需要的HTML代码。

那么下面就是编写样式了。


jquery链式调用 - 层级菜单示例_ide_03


使用jquery的链式写法，设置层级菜单的收缩


jquery链式调用 - 层级菜单示例_ide_04


完整代码如下

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-3.4.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".menu a").click(function(){
                // alert($(this).html());
                // alert($(this).siblings().html());
                // $(this).siblings().toggle(1,'swing');
                // $(this).siblings().slideUp();
                // $(this).siblings().slideDown().parent().siblings().children('ul').slideUp();
                // $(this).siblings().addClass("active").slideDown().parent().siblings().children('ul').removeClass("active").slideUp();
                $(this).siblings().addClass("active").stop().slideToggle().parent().siblings().children('ul').removeClass("active").slideUp();
            })
        })
    </script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            font-family: 'Microsoft Yahei';
            color: #fff;
        }

        .menu_warp{
            width: 310px;   
        }

        .menu_warp a{
            display: block;
            width: 100%;
            height: 45px;
            line-height: 45px;
            text-indent: 14px;
            background-color: rgb(51,102,201);
            border-bottom: 1px solid #fff;
        }

        .menu li ul li {
            height: 45px;
            line-height: 45px;
            text-indent: 28px;
            background-color: rgb(122,161,239);
            border-bottom: 1px solid #fff;
        }

        .menu ul{
            display: none;
        }

        .menu .active{
            display: block;
        }

    </style>
</head>
<body>
        <!-- div.menu_warp>ul.menu>(li>a{水果}+(ul>li{苹果}*3))*5 -->
        <div class="menu_warp">
            <ul class="menu">
                <li>
                    <a href="#">水果</a>
                    <ul class="active">
                        <li>苹果</li>
                        <li>苹果</li>
                        <li>苹果</li>
                    </ul>
                </li>
                <li>
                    <a href="#">水果</a>
                    <ul>
                        <li>苹果</li>
                        <li>苹果</li>
                        <li>苹果</li>
                    </ul>
                </li>
                <li>
                    <a href="#">水果</a>
                    <ul>
                        <li>苹果</li>
                        <li>苹果</li>
                        <li>苹果</li>
                    </ul>
                </li>
                <li>
                    <a href="#">水果</a>
                    <ul>
                        <li>苹果</li>
                        <li>苹果</li>
                        <li>苹果</li>
                    </ul>
                </li>
                <li>
                    <a href="#">水果</a>
                    <ul>
                        <li>苹果</li>
                        <li>苹果</li>
                        <li>苹果</li>
                    </ul>
                </li>
            </ul>
        </div>
</body>
</html>

注意：在写这个代码的过程中，发现如果​​a​​​标签的​​href = ""​​​，这种情况下监听click方法是无法正常触发jquery的特效的，需要设置​​href=“#”​​，才可以正常使用jquery特效。


jquery链式调用 - 层级菜单示例_html_05