Question

这是一个基本的移动幻灯片放入/滑出菜单。

我发现很难调试，但基本上我的问题是，当我按下菜单按钮时，菜单打开顺利，然后再次按下它并顺利关闭。然而，当我再次按下它时（第三次）它会不顺利打开，它就会出现。然而，它仍然顺利进行。

我希望它能一直平稳地打开和关闭。我无法弄清楚原因，但我认为它与它关闭时所达到的位置有关。几乎就像加载页面时的位置不一样。

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) ;
}

Answer 1

试试这个

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

过渡轻松翻译只能在Iphone

1 个答案: