一、简单的移动端tab头部二级下拉导航栏，向下弹出，向上隐藏

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name='viewport' content='width=device-width,minimum-scale=1.0 maximum-scale=1.0 user-scalable=no' />
    <title>YanGo</title>
    <script type="text/javascript" src="http://www.xxiaoyuan.top/jquery-1.9.1.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0 auto;
        }
        li{
            list-style-type: none;
        }
        .box{
            margin: auto;
        }
        .bar{
            position: relative;
            float: left;
            width: 33.33%;
            text-align: center;
        }
        .bar p{
            background-color: #08c;
            color: #fff;
            height: 40px;
            line-height: 40px;
        }
        .bar ul{
            display: none;
            margin-top: 10px;
            position: relative;
            top: 0;
            background: #29a7e6;
            color: #fff;
            width: 80%;
            position: relative;
            border-radius: 10px;
        }
        .bar ul:before{
            position: absolute;
            content: "";
            top: -8px;
            background: #29a7e6;
            width: 15px;
            height: 15px;
            left: 46%;
            transform:rotate(45deg);
            z-index: -1;
        }
        .bar ul li{
            height: 35px;
            line-height: 35px;
        }
        .box li:active{
            background: rgba(255,255,255,.3);
        }    
    </style>
</head>
<body>
    <div class="box">
        <ul class="ul1">
            <li class="bar">
                <p>早餐</p>
                <ul>
                    <li>糕点</li>
                    <li>稀粥</li>
                    <li>营养</li>
                </ul>
            </li>
            <li class="bar">
                <p>午餐</p>
                <ul>
                    <li>小炒</li>
                    <li>凉拌</li>
                    <li>甜点</li>
                </ul>
            </li>
            <li class="bar">
                <p>晚餐</p>
                <ul>
                    <li>汤类</li>
                    <li>肉类</li>
                    <li>清淡</li>
                </ul>
            </li>
            <div style="clear: both;"></div>
        </ul>
    </div>
</body>
<script>
    $(".bar").click(function(){
        if($(this).children("ul").css("display") == "block"){
            $(this).children("ul").slideUp(300);
        }
        else{
            $(this).children("ul").slideDown(300);
        }
    });
</script>
</html>

相关阅读:
Scala: 包对象
云服务使用技巧
leetcode上一些常见的链表问题
数据挖掘的价值
leetcode上的一些分治算法
双指针的应用
KNN算法
线性回归
leetcode上的一些单链表
leetcode上的一些栈、队列问题

原文地址：https://www.cnblogs.com/fger/p/11147251.html