0

有人可以帮我编辑以下脚本吗？响应式菜单正在工作，但我想让移动版菜单在单击“link1”或“link2”时折叠。

==================================================== ====== 这是脚本：

    $(function() {
    var pull        = $('#pull');
        menu        = $('#nav-bar ul');
        menuHeight  = menu.height();

    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });
});

==================================================== ====== 导航栏 HTML：

<div id="nav-bar" class="clearfix">
<ul class="clearfix">
    <li><a href="#link1">LINK1</a></li>
    <li><a href="#link2">LINK2</a></li>
</ul>
<a href="#" id="pull">MENU</a>
</div>

==================================================== ====== CSS：

     /* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
*zoom: 1;
}

#nav-bar {
    height: 65px;
    position: fixed;
    width: 100%;
    z-index: 100;
}

#nav-bar ul {
    height: 65px;
    margin: 0 auto;
    width: 940px;
}

#nav-bar li {
    display: inline;
    float: left;
}

#nav-bar a {
    display: inline-block;
    line-height: 65px;
}


#nav-bar a:hover,
#nav-bar a:active,
.active {
    background-color: #343434;
    box-shadow: 0 3px 8px #2d2d2d inset;
}

#nav-bar a#pull {
    display: none;
}
4

1 回答 1

0 
$("#nav-bar ul li a").on("click", function(e){
    e.preventDefault();   
    menu.slideUp();
});
于 2013-09-11T03:19:02.713 回答