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');
        }
    });
});

================================================== ====== Navbar 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 に答える