基于jQuery的简单的手机端下拉菜单

HTML

<header class="gqm-header">
    <div class="gqm-header-icon-back fl"><a href="javascript:;">返回</a></div>
    <div class="fr mr"><a class="acc_img" href=""><img src="images/myaccount.png" alt="我的账户"></a></div>
    <div class="gqm-header-title" id="primary-nav">菜单</div>
</header>
<nav class="nav-group">
    <a href="#">连接一</a>
    <a href="#">连接二</a>
    <a href="#">连接三</a>
</nav>

CSS

  <style>
        #primary-nav {
            display: block;
            cursor: pointer;
        }
        .nav-group {
            display: none;
            top: 4.1875em;
            left: 0px;
            width: 100%;
            z-index: 99;
            background: #c84329;
            color: #a2a7aa;
        }
        .nav-group a {
            display: block;
            padding: 0 10px;
            color: #fff;
            height: 36px;
            line-height: 36px;
            border-top: 1px solid #fff;
            font-size: 12px;
            text-align: center;
        }
    </style>

JS

$(function  switchNav() {
    $("#primary-nav").click(function () {
        if ($(".nav-group").css("display") == "none") {
            $(".nav-group").slideDown()
        } else {
            $(".nav-group").slideUp()
        }
    });
});

记得引出jQuery哦~，本实例已经测试！