Question

<script>
$(function () {
    var pull = $('#pull');
    menu = $('nav ul');
    menuHeight = menu.height();

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

    $('.link').click(function (e) {
        e.preventDefault();
        menu.slideToggle('1200');
    });

    $(window).resize(function () {
        var w = $(window).width();
        if (w < 600 && menu.is(':hidden')) {
            menu.removeAttr('style');
            enter code here
        }
    });
});
</script>

<nav class="clearfix">
    <ul class="clearfix">
        <li><a href="#home" class="link">Home</a></li>
        <li><a href="#about" class="link">How-to</a></li>
        <li><a href="#work" class="link">Icons</a></li>
        <li><a href="#contact" class="link">Design</a></li>
    </ul>
<a href="#" id="pull"><img src="images/logo.png"/></a>
</nav>

我在一个教程中在线发现了这个代码，我已经调整了一下，使它成为我想要导航的功能。我遇到了能够上下切换这个菜单的问题。我希望它是我点击#pull id的地方，它会切换下来并向我显示链接。然后，当我点击链接时，我希望它切换回来并隐藏链接，但我只希望它为导航的响应方面做到这一点，而不是在它的正常视图上。无论是否有响应，它都会切换。请帮助我！

这是文件链接http://www.mediafire.com/download/cz1q3rg3fqm5pxh/Demo-Files.7z

Answer 1

同时触发

var menu = $('nav ul'), plink = $('#pull, .link'), go;
function acdc() {
    var ww = $(window).width();
    if (ww>600 && go) {//on desktop
        if (menu.is(':hidden')) { menu.removeAttr('style'); }
        plink.unbind();
        go=false;
    } else if (ww<600 && !go) {//on small screen
        plink.on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });
        go=true;
    }
}
acdc();
$(window).resize(function () { acdc(); });

做了一个小提琴：http://jsfiddle.net/filever10/Lt9V3/

滑动导航＆amp;关闭JQuery问题

1 个答案: