我无法点击移动浏览器上的菜单项

Question

我的网站上有一个菜单，我用JQuery和CSS制作。但是，当我尝试在移动设备上使用它时，我无法点击任何菜单项。有人可以帮我诊断病因吗？

＆＃13;

＆＃13;

$().ready(function () {
    $("#button").click(function() {
        if($("#button").hasClass("buttonexit")){
            $("#b1").removeClass("nav-menu-tb1");
            $("#b3").removeClass("nav-menu-bb2");
            $("#b1").addClass("nav-menu-tb1-exit");
            $("#b3").addClass("nav-menu-bb2-exit");
            $("#button").removeClass("buttonexit");
            $(".sun").removeClass("animated zoomOut")
            $(".sun").addClass("animated zoonIn")
            $("nav ul").css("display","none");
        }else{
            $("#b1").removeClass("nav-menu-tb1-exit");
            $("#b3").removeClass("nav-menu-bb2-exit");
            $("#b1").addClass("nav-menu-tb1");
            $("#b3").addClass("nav-menu-bb2");
            $("#button").addClass("buttonexit");
            $(".sun").removeClass("animated zoomIn")
            $(".sun").addClass("animated zoomOut")
            $("nav ul").css("display","block");
        }
    });    
});

＆＃13;

nav{
    width: 100%;
    vertical-align: middle;
}
.logo{
    margin-left: 0;
    width: 12%;
    display: inline-block;
    height: auto;
    vertical-align: middle
}
nav ul{
    position: absolute;
    right: 0;
    display: inline-block;
    width: 50%;
    z-index: 15;

}
nav ul li a,
nav ul li a:hover,
nav ul li a:visited{
    text-decoration: none;
    color: #1e1e1e;
}
nav ul li{
    display: inline-block;
    font-family: 'main-thin';
    font-size: 2vw;
    text-decoration: none;
    margin-left: 1%;
    margin-right: 1%;
    vertical-align: middle;

}
.social-wrapper,
.social-wrapper li{
    display: inline-block;
}

.socialmedialogo{
    height: 2vw;
    width: auto;
}
/*styles the responsive navigation button*/
#button{
    vertical-align: middle;
    display: none;  
}

#b1,
#b2,
#b3{
    width: 10vw;
    height: 2vw;
    border-radius: 1vw;
    background-color: black;
}
#b1{
    margin-bottom: 1vw;
}
#b3{
    margin-top: 1vw;
}
.nav-menu-tb1{
    animation-name: nav-menu-tb1;
    animation-duration: .2s;
    animation-fill-mode: forwards;
}
.nav-menu-bb2{
    animation-name: nav-menu-bb2;
    animation-duration: .2s;
    animation-fill-mode: forwards;
}

@keyframes nav-menu-tb1{
    0%{transform: rotate(0deg); width: 10vw; margin-bottom: 1vw;}
    100%{transform: rotate(-45deg); width: 5vw; margin-bottom: -.55vw;}
}
@keyframes nav-menu-bb2{
    0%{transform: rotate(0deg); width: 10vw; margin-top: 1vw;}
    100%{transform: rotate(45deg); width: 5vw; margin-top: -.55vw;}
}
.nav-menu-tb1-exit{
    animation-name: nav-menu-tb1-exit;
    animation-duration: .2s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
.nav-menu-bb2-exit{
    animation-name: nav-menu-bb2-exit;
    animation-duration: .2s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
@keyframes nav-menu-tb1-exit{
    0%{transform: rotate(-45deg); width: 5vw; margin-bottom: -.55vw;}
    100%{transform: rotate(0deg); width: 10vw; margin-bottom: 1vw;}
}
@keyframes nav-menu-bb2-exit{
    0%{transform: rotate(45deg); width: 5vw; margin-top: -.55vw;}
    100%{transform: rotate(0deg); width: 10vw; margin-top: 1vw;}
}

@media(max-width: 1024px){
    nav{

    }
    nav ul{
        display: none;
        margin-top: 5vh;
    }
    nav ul li{
        display: block;
        margin-top: 2vh;
        font-size: 10vw;
        margin-left: -95%;;
        text-align: center;

    }
    .socialmedialogo{
        height: 10vw;
    }
    .logo{
        width: 20%;

    }
    #button{
        display: inline-block;
        margin-left: 65%;
        transform: scale(.7);
    }
}
@media(max-width: 760px){
    .logo{
        width: 30%;
    }
    nav ul li{
        display: block;
        margin-top: 2vh;
        font-size: 16vw;
        margin-left: -95%;;
        text-align: center;
    }
    #button{
        margin-left: 55%;
        transform: scale(1);
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>

            <img class="logo" src="img/nav/personal-logo.svg" />
            <div id="button">
                <div id="b1" class="top-bottom-buttons"></div>
                <div id="b2"></div>
                <div id="b3" class="top-bottom-buttons"></div>
               
            </div>
            <ul>

                <a href="about.html"><li>ABOUT</li></a>
                <a href="http://www.jarektroyer.com/blog"><li>BLOG</li></a>
                <a href="portfolio.html"><li>PORTFOLIO</li></a>
                <a href="contact.html"><li>CONTACT</li></a>
                <li id="social-logo">
                    <a href="http://www.instagram.com/jarek_troyer" target="_blank"><img class="socialmedialogo" alt="instagram-button" src="img/nav/instagram-logo.svg" /></a>
                </li>
                <li id="social-logo">
                    <a href="http://www.linkedin.com/in/jarektroyer" target="_blank"><img class="socialmedialogo" alt="linkedin-button" src="img/nav/linkedin-logo.svg" /></a>
                </li>

            </ul>
        </nav>

＆＃13;

＆＃13;

＆＃13;