实现一个基本菜单栏（包含二级菜单）

利用jq实现菜单下滑上拉

css：

<style>
        ul>li {
            border: 1px solid #333;
            width: 200px;
            /* height: 50px; */
            line-height: 50px;
        }
        
        ul>li span {
            padding-left: 15px;
        }
        
        .sub {
            display: none;
            padding-left: 0;
        }
        
        .sub>li {
            border: 1px solid #333;
            width: 200px;
            height: 30px;
            line-height: 30px;
            background-color: blanchedalmond;
            list-style: none;
        }
    </style>

html：

 <ul class="nav" style="list-style: none;">
        <li><span>一级菜单栏</span>
            <ul class="sub">
                <li>二级菜单栏</li>
                <li>二级菜单栏</li>
                <li>二级菜单栏</li>
                <li>二级菜单栏</li>
            </ul>
        </li>
        <li><span>一级菜单栏</span>
            <ul class="sub">
                <li>二级菜单栏</li>
                <li>二级菜单栏</li>
                <li>二级菜单栏</li>
                <li>二级菜单栏</li>
            </ul>
        </li>
        <li><span>一级菜单栏</span>
            <ul class="sub">
                <li>二级菜单栏</li>
                <li>二级菜单栏</li>
                <li>二级菜单栏</li>
                <li>二级菜单栏</li>
            </ul>
        </li>
        <li><span>一级菜单栏</span>
            <ul class="sub">
                <li>二级菜单栏</li>
                <li>二级菜单栏</li>
                <li>二级菜单栏</li>
                <li>二级菜单栏</li>
            </ul>
        </li>
        <li><span>一级菜单栏</span>
            <ul class="sub">
                <li>二级菜单栏</li>
                <li>二级菜单栏</li>
                <li>二级菜单栏</li>
                <li>二级菜单栏</li>
            </ul>
        </li>
    </ul>

js：

<script src="./js/jquery-2.1.4.min.js"></script>
    <script>
        $(function() {
            $('.nav>li').click(function() {
                var $sub = $(this).children(".sub");
                $sub.slideDown(300);
                var $othersub = $(this).siblings().children(".sub");
                $othersub.slideUp(300);
            })
        })
    </script>

没有包含a标签
链式编程一行搞定：

$(this).children(".sub").slideDown(300).parent().siblings().children('.sub').slideUp(300);