为什么按钮在第一次单击时没有响应，以及为什么菜单在缩减到桌面时消失

我的移动导航遇到了一些问题。

首先，下拉菜单不会响应第一次点击，但它会在第二次点击和之后的每次点击时开始响应。

其次，当我将浏览器缩放回桌面版本时，导航将消失。

以下是我的代码在 Codepen 中的设置方式：http://bit.ly/1Bxskho

.HTML

<nav id="main-nav">
     <a id="mobile-btn">Mobile Menus</a>
     <ul>
       <li><a href="index.html" target="_self" class="visited">Home</a></li>
       <li><a href="architectures.html" target="_self">Architectures</a></li>
       <li><a href="nature_phenomenons.html" target="_self">Nature's Phenomenons</a></li>
     </ul>
 </nav>

.CSS

#main-nav{
    float: right;
}
#mobile-btn{
    display: none;
    text-indent: 0;
    margin: 20px;
    background: url(../images/sprite.png) no-repeat -25px 0;
}
#main-nav ul{
    margin: 25px 0 0 0;
}
#main-nav ul li{
    display: inline-block;
    padding-left: 20px;
}
#main-nav ul li a{
    display: block;
    color: #29abe1;
    font-family: 'Muli', san-serif;
    font-weight: 300;
    font-size: 1.1em;
}
#main-nav ul li a:hover, #main-nav ul li a.visited{
    color: #21b573;
}
@media screen and (max-width: 780px) {
    /* #main-nav & #mobile-btn */
    #mobile-btn{
        display: block;
        background: url(../images/sprite@2x.png) no-repeat -25px 0;
        background-size: 200px 200px;
        width: 30px;
        height: 20px;
    }
    #main-nav:hover #mobile-btn, #mobile-btn:hover{
        cursor: pointer;
    }
    #main-nav ul, #main-nav ul li, #main-nav ul li a{
        width: 100%;
    }
    #main-nav ul{
        background-color: #fff;
        position: absolute;
        top: 60px;
        left: 0;
        margin: 0;
        display: none;
        -webkit-box-shadow: 0 2px 3px #21b573;
        -moz-box-shadow: 0 2px 3px #21b573;
        -ms-box-shadow: 0 2px 3px #21b573;
        -o-box-shadow: 0 2px 3px #21b573;
        box-shadow: 0 2px 3px #21b573;
    }
    #main-nav ul li{
        padding: 0;
        border-top: 1px solid #21b573;
    }
    #main-nav ul li a{
        text-align: center;
        padding: 20px 0;
    }
}

爪哇语

$('#mobile-btn').toggle(function(e){
        e.preventDefault();
        $(this).click(function(){
            $('#main-nav ul').stop().slideDown();
            $('#main-nav').css({"background-color": "#21b573"});
            $('#mobile-btn').css({"background-position": "-65px 0"});
        })
    }, function(){
        $(this).click(function(){
            $('#main-nav ul').stop().slideUp();
            $('#main-nav').css({"background-color": "#fff"});
            $('#mobile-btn').css({"background-position": "-25px 0"});
        })
    });