手机导航关闭按钮不关闭手机上的菜单

Question

我发现这个美味的小手机菜单http://codepen.io/Johnm__/pen/eNgXZW，我试过实施。当我使用浏览器调整网站的大小来启动移动菜单，然后测试打开的关闭汉堡包菜单时，它可以正常工作。当我在手机上查看网站时，我无法关闭菜单。

http://codepen.io/Johnm__/pen/eNgXZW

这里的jQuery的形成codepen ...

// HAMBURGLERv2

function togglescroll() { 
    $('body').on('touchstart', function(e) { 
     if ($('body').hasClass('noscroll')) { 
     e.preventDefault(); 
     } 
    }); 
    } 

    $(document).ready(function() { 
    togglescroll() 
    $(".icon").click(function() { 
     $(".mobilenav").fadeToggle(500); 
     $(".top-menu").toggleClass("top-animate"); 
     $("body").toggleClass("noscroll"); 
     $(".mid-menu").toggleClass("mid-animate"); 
     $(".bottom-menu").toggleClass("bottom-animate"); 
    }); 
    }); 

    // PUSH ESC KEY TO EXIT 

    $(document).keydown(function(e) { 
    if (e.keyCode == 27) { 
     $(".mobilenav").fadeOut(500); 
     $(".top-menu").removeClass("top-animate"); 
     $("body").removeClass("noscroll"); 
     $(".mid-menu").removeClass("mid-animate"); 
     $(".bottom-menu").removeClass("bottom-animate"); 
    } 
    }); 

这里的CSS ...

* { 
    font-family: 'helvetica nue', sans-serif; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
    -webkit-tap-highlight-color: transparent; 
    /* For some Androids */ 
    } 

    .top-animate { 
    background: #fff !important; 
    top: 13px !important; 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
    } 

    .mid-animate { 
    opacity: 0; 
    } 

    .bottom-animate { 
    background: #fff !important; 
    top: 13px !important; 
    -webkit-transform: rotate(-225deg); 
    transform: rotate(-225deg); 
    } 

    .top-menu { 
    top: 5px; 
    width: 25px; 
    height: 2px; 
    border-radius: 10px; 
    background-color: #F9A530; 
    } 

    .mid-menu { 
    top: 13px; 
    width: 25px; 
    height: 2px; 
    border-radius: 10px; 
    background-color: #F9A530; 
    } 

    .bottom-menu { 
    top: 21px; 
    width: 25px; 
    height: 2px; 
    border-radius: 10px; 
    background-color: #F9A530; 
    } 

    .menui { 
    background: orange; 
    transition: 0.6s ease; 
    transition-timing-function: cubic-bezier(.75, 0, .29, 1.01); 
    margin-top: 10px; 
    position: absolute; 
    } 

    .icon { 
    z-index: 999; 
    position: fixed; 
    display: block; 
    padding: 9px; 
    height: 32px; 
    width: 32px; 
    margin: 0px; 
    top: 0; 
    left: 50px; 
    } 

    .mobilenav { 
    font-family: inherit; 
    top: 0; 
    left: 0; 
    z-index: 999; 
    display: none; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background: orange; 
    } 

    .mobilenav li { 
    list-style-type: none; 
    text-align: center; 
    padding: 10px; 
    } 

    .mobilenav li a { 
    font-size: 150%; 
    color: #fff; 
    text-decoration: none; 
    font-weight: 300; 
    width: 100%; 
    } 

    .mobilenav li:first-child { 
    margin-top: 60px; 
    } 

Answer 1

您正在使用

e.preventDefault(); 

在第6行。这可以防止您的触摸事件工作。这种方式会压制touchstart事件。