導航菜單不適用於手機

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()也阻止標準瀏覽器行爲。