jquery - 手机菜单打不开

Question

我有一个菜单，我想通过更改它的顶部位置来隐藏/显示它。

在我登录之前，菜单看起来是这样的:

<div class="lc">
    <h1><a href="./"><img src="logo.png" /></a></h1>
    <a href="#" id="menuBtn"></a>
    <nav id="mainNav">
        <ul>
            <li><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
        </ul>
    </nav>
</div>

我登录后，添加了一些元素:

<div class="lc">
    <h1><a href="./"><img src="logo.png" /></a></h1>
    <a href="#" id="menuBtn"></a>
    <nav id="mainNav">
        <ul>
            <li><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
            <li class="nav-li-..."><a href="....php">...</a></li>
        </ul>
        <div class="nav-admin">
            <strong>Administrator links:</strong><br />
            <a href="....php?users">...</a><br />
            <a href="....php?user_logs">...</a><br />
            <a href="....php?dealer_logs">...</a><br />
            <a href="....php?herd_logs">...</a><br />
            <a href="....php?php_logs">...</a>
        </div>
    </nav>
</div>  

这个 CSS 属于它:

.lc, nav, h1 {
    background: #fdf6bf;
    background: #FDD;
}
.lc {
    position: fixed;
    z-index: 200;
    width: 14em;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: .5em;
    overflow: auto;
}
    h1 {
        width: 100%;
        font-size: 1em;
        margin-top: 0;
        margin-bottom: .5em;
    }
        h1 a {
            display: block;
            width: 100%;
            text-align: center;
        }
            h1 a img { max-width: 70%; }

    nav ul { list-style: none; }
    nav ul li { padding: .75em 0 .75em 4.25em; }
    nav ul li.is-active { background: #fdf9dc; }
    nav ul li.is-active a:after {
        content: "\232A";
        position: absolute;
        right: .25em;
        top: -.05em;
        font-size: 3em;
        height: 1em;
        line-height: 1em;
        vertical-align: middle;
        color: #c9c49d;
    }

    nav ul a,
    .btn-add {
        display: block;
        position: relative;
        height: 3em;
        padding-left: 1em;
        line-height: 3em;
        vertical-align: middle;
        font-family: 'Exo', sans-serif;
        text-decoration: none;
        color: #4f4e4c;
        font-size: 1em;
        font-weight: 600;
    }
        nav ul a:before,
        .btn-add:before {
            content: '';
            position: absolute;
            right: 100%;
            top: 50%;
            margin-top: -1.75em;
            width: 3.5em;
            height: 3.5em;
            background: url(images/menu_home.png) center center no-repeat;
            background-size: cover;
        }

.nav-show { top: 0; }
.no-scroll { overflow: hidden; }

@media screen and (max-width: 550px) { 
    * { font-size: 1em; }
    nav {
        position: fixed;
        z-index: 180;
        top: -100%;
        left: 0;
        padding-top: 4.5em;
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
        background: #fffad5;
    }
    nav ul li.is-active { background: #fffcea; }

    .lc {
        position: fixed;
        width: 100%;
        height: 3.5em;
        overflow: hidden;
    }

触发我使用的菜单

$(function() {
    $('#menuBtn').on('click', function(e) {
        $('body').toggleClass('no-scroll');
        $('#mainNav').toggleClass('nav-show');
        e.preventDefault();
    });
});

问题是菜单确实在登录前显示。但在那之后，我无法打开菜单。此问题不在台式机上，而仅在手机(Android)上存在。我试过各种手机和浏览器，但它们都有同样的问题。

有人知道吗？

Answer 1

试试这个， 即使 position:fixed 也可以，但您需要在顶部添加一些 px(即大约 70px)，但这会隐藏您的其他链接。

   @media screen and (max-width: 550px) { 
            * { font-size: 1em; }
            nav {
               position:relative;
                padding-top: 4.5em;
                width: 100%;
                height: 100%;
               -webkit-transition: all 1s ease-in-out;
                -moz-transition: all 1s ease-in-out;
                -o-transition: all 1s ease-in-out;
                transition: all 1s ease-in-out;
                background: #fffad5;
            }
            nav ul li.is-active { background: #fffcea; }

            .lc {
                position: fixed;
                width: 100%;
                height: 100%;

            }
}