导航菜单不适用于手机

Question

我正在使用名为Hamburgler的插件进行导航，它在桌面上运行得非常棒。但是，在移动设备上，导航会显示，但无法点击。

我试图编辑的网站编码有点太棒了，我很抱歉。

导航编码：

JS

<script type="text/javascript"> 
    // 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"); 
    } 
}); 
</script> 

HTML

 <a href="javascript:void(0)" class="icon"> 
    <div class="menui top-menu"></div> 
    <div class="menui mid-menu"></div> 
    <div class="menui bottom-menu"></div> 
       </a> 
     <div class="mobilenav"> 
    <div class="insidenav"> 
      <a href="/salary-guide-2016" class="inside">2016 Salary Guide</a> 
      <a href="https://umd-salary-guide-2015.silk.co/" class="inside" target="_blank">2015 Salary Guide</a> 
      <a href="http://dbk.silk.co/explore/Zj5maAM" class="inside" target="_blank">2014 Salary Guide</a> 
      </div> 
</div> 

CSS

#navigation { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 80px; 
    background-color: #fff; 
    z-index: 994; 
} 

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

.mid-animate { 
    opacity: 0; 
     z-index: 999 !important; 
} 

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

.top-menu { 
    top: 5px; 
    width: 25px; 
    height: 2px; 
    border-radius: 10px; 
    background-color: #000; 
    z-index: 999 !important; 

} 

.mid-menu { 
    top: 13px; 
    width: 25px; 
    height: 2px; 
    border-radius: 10px; 
    background-color: #000; 
    z-index: 999 !important; 

} 

.bottom-menu { 
    top: 21px; 
    width: 25px; 
    height: 2px; 
    border-radius: 10px; 
    background-color: #000; 
    z-index: 999 !important; 

} 

.menui { 
    background: #000; 
    transition: 0.6s ease; 
    transition-timing-function: cubic-bezier(.75, 0, .29, 1.01); 
    margin-top: 10px; 
    position: absolute; 
    z-index: 999 !important; 
} 

.icon { 
    z-index: 999 !important; 
    display: block; 
    padding: 9px; 
    height: 32px; 
    width: 32px; 
    position: fixed; 
    right: 30px; 
    top: 15px; 
} 

.mobilenav { 
    font-family: inherit; 
    top: 0; 
    left: 0; 
    z-index: 995 !important; 
    display: none; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background: #FFF; 
    opacity: 0.98; 
} 

.insidenav { 
    position: absolute; 
     top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
     -moz-transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    width: 100%; 
    max-width: 300px; 

} 

a.inside { 
    z-index: 2147483647; 
    display: block; 
    width: 300px; 
    height: 70px; 
    background-color: #dd152e; 
    color: #FFF; 
    font-size: 16px; 
    font-family: 'Open Sans', sans-serif; 
    text-align: center; 
    line-height: 70px; 
    text-transform: uppercase; 
     -webkit-transition: background .5s ease-in-out; 
-moz-transition: background .5s ease-in-out; 
-ms-transition: background .5s ease-in-out; 
-o-transition: background .5s ease-in-out; 
transition: background .5s ease-in-out; 
    margin-bottom: 50px; 
    text-decoration: none; 
} 

a.inside:hover { 
    background-color: #c21228; 
} 

下面是网站本身： http://salaryguide.diamondbacklab.com

对不起，我知道这是一个大量的代码来看看。任何帮助将超级赞赏！

Answer 1

你需要从JavaScript删除这些行：

if ($('body').hasClass('noscroll')) { 
    e.preventDefault(); 
} 

，使其工作。因为preventDefault()也阻止标准浏览器行为。