Javascript 电话导航无法正常工作

我使用一个简单的开关来打开和关闭我的移动导航。当导航加载为时，加载手机宽度，并在应隐藏导航时显示导航，从而导致页面加载宽度大于宽度。另外，我无法让导航菜单停留在页面上，因此当再次单击它时，它将关闭

这是我所拥有的，我不知道为什么导航显示，然后它没有被点击

 #nav-ph {
    position: absolute;
    top: 100px;
    right: 0px;
    margin: 0px;
    padding: 5px 0;
    list-style: none;
    z-index: 9999;
    width: 100%;
}
.nav-btn-ph {
    position: absolute;
    top: -2px;
    left: -40px;
    width: 40px;
    height: 35px;
    display: block;
    cursor: pointer;
}
.nav-btn-ph img {
    margin: 20px 0px 0px 13px;
}
.main-nav-ph li {
    padding:0 10px;
    text-align: left;
    text-decoration: none;
    color: #FFF;
    font-family: @m;
    font-size: 24px;
}
.main-nav-ph li a {
    color: #000;
    text-decoration: none;
}
.main-nav-ph li a:hover {
    color: #000;
}

$(function() {
    $('#nav-ph').stop().animate({'margin-right':'-300px'},1000);

    function toggleDivs() {
        var $inner = $("#nav-ph");
        if ($inner.css("margin-right") == "-300px") {
            $inner.animate({'margin-right': '0'});
            $(".nav-btn-ph").html()
        } else {
            $inner.animate({'margin-right': "-300px"}); 
            $(".nav-btn-ph").html()
        }
    }
    $(".nav-btn-ph").bind("click", function(){
        toggleDivs();
    });
});

<div id="nav-ph">
    <div class="nav-btn-ph">Nav Menu</div>
    <ul class="main-nav-ph">
        <li><a href="#the-banner-advantage">THE ADVANTAGE</a>
        </li>
        <li><a href="#banner-services">OUR SERVICES</a>
        </li>
        <li><a href="#team">OUR TEAM</a>
        </li>
        <li><a href="#banner-news">MAKING NEWS</a>
        </li>
        <li><a href="#banner-contact">CONTACT</a>
        </li>
    </ul>
</div>

---

这里有一个指向JSFIDLE的链接，如果我理解正确，请尝试删除以下项目

.nav-btn-ph {
    position: absolute;
    top: -2px;
    left: -40px; //remove this css, the nav emnu will stay longer
    width: 40px;
    height: 35px;
    display: block;
    cursor: pointer;
}

最好删除此动画代码以保持在空白范围内

$('#nav-ph').stop().animate({'margin-right':'-300px'},1000);

---

选中此项

删除左侧：-40px对保持在左侧页面上的导航有效，但我遇到的主要问题是在移动设备上，当您关闭菜单时，菜单会从页面的外侧消失，因此您可以将页面向右移动，并在移动设备上查看菜单。关于如何解决这个问题有什么想法吗？我想做的是，当导航关闭时，我想隐藏链接，这样它们就不会显示出来。@user2836519不确定mobile，但对于您的第二项检查，它正在接近，但我需要导航从右向左滑动，并在加载页面时关闭。谢谢你到目前为止的帮助。我做了一些调整，但是你给我看的效果很好。谢谢这里有一个到决赛的链接