jquery - 过渡轻松，仅在Iphone上首次顺利翻译

这是基本的移动滑入/滑出菜单。

我发现调试起来很困难，但是基本上我的问题是，当我按下菜单按钮时，菜单会平滑打开，然后再按一次，然后菜单会平滑关闭。但是，当我再次（第三次）按下它时，它并没有平滑打开，只是出现了。但是它仍然进行得很顺利。

我希望它能一直平稳地打开和关闭。我无法找出原因，但我想这与它关闭时到达的位置有关。几乎好像页面加载时的位置不同。

JS

$('.mobile-menu').click( function(){
    $(this).next().toggleClass('open');

});

的HTML

    <div id="top-links">

        <div class="mobile-menu"> <span></span><span></span><span></span><div>Menu</div></div>
        <ul class="nav-menu">
            <li><a href="">About</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">account</a></li>
            <li><a href="">Help</a></li>


        </ul>
    </div>
</div>

的CSS

#top-links {
    margin-right: 2.5%;
    width: 140px;
}

.nav-menu {
    background: rgba(0, 0, 0, 0) url("../image/grey-bg.jpg") repeat scroll 0 0;
    padding-bottom: 38px;
    top: 100px;
    width: 90%;
    padding-left:10%;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    transition: transform .5s ease;
    -webkit-transition:-webkit-transform .5s ease;
    overflow: hidden;
    height:240px;
    -webkit-backface-visibility: hidden;
    position:absolute;
    left: 0px;

}

.nav-menu.open {
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -o-transform: translateX(0%);
    transform: translateX(0%);
    transition: transform .5s ease;
    -webkit-transition:-webkit-transform .5s ease;

}


.nav-menu::after {
    background: rgba(255,255,255,0.27);
    bottom: 0;
    content: "";
    height: 90px;
    left: 0;
    position: absolute;
    width: 100%;
    bottom:-73px;
    transform: rotate(-1deg);
    -o-transform: rotate(-1deg) ;
    -webkit-transform: rotate(-1deg) ;
    -moz-transform: rotate(-1deg) ;
}

最佳答案

尝试这个

var menuIcon =  $('.mobile-menu')[0]; //or just give your menu icon a id
var nav = $('.nav-menu')[0];
$(menuIcon).click( function(){
    $(nav).toggleClass('open');
});