Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/69.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
上下滑动导航JQuery问题_Jquery_Html_Css_Navigation_Slidetoggle - Fatal编程技术网

上下滑动导航JQuery问题

上下滑动导航JQuery问题,jquery,html,css,navigation,slidetoggle,Jquery,Html,Css,Navigation,Slidetoggle,我在一个教程中在线找到了这段代码,我对它进行了一些调整,使它成为我想要的导航功能。我在上下切换此菜单时遇到了问题。我希望它是我点击拉id的地方,它将向下切换并显示链接。然后,当我点击一个链接时,我希望它切换回并隐藏链接,但我只希望它在导航的响应方面这样做,而不是当它在它的正常视图上时。它切换是否响应。请帮帮我 这里有一个指向文件的链接,会相应地触发这两个文件 调侃:菜单和菜单八不是用var.@Mark声明的,那么我如何解决这个问题,使它按照我的意愿运行?我尝试使用该代码,以便它能够响应地触发这两

我在一个教程中在线找到了这段代码,我对它进行了一些调整,使它成为我想要的导航功能。我在上下切换此菜单时遇到了问题。我希望它是我点击拉id的地方,它将向下切换并显示链接。然后,当我点击一个链接时,我希望它切换回并隐藏链接,但我只希望它在导航的响应方面这样做,而不是当它在它的正常视图上时。它切换是否响应。请帮帮我

这里有一个指向文件的链接,

会相应地触发这两个文件


调侃:

菜单和菜单八不是用var.@Mark声明的,那么我如何解决这个问题,使它按照我的意愿运行?我尝试使用该代码,以便它能够响应地触发这两个事件,但仍然无法正常工作?在谷歌Chrome的控制台中,它没有显示任何错误。但是有了这些代码,它是否能够在我设置的媒体查询中执行,所以当我单击pull时,它将向下切换,然后当我单击五个链接中的一个时,它将向上切换?我只是希望它在媒体查询中,而不是在桌面查询中这样做。看起来它需要在运行时解除绑定,更新答案。切换开关,这样它就发生在媒体上而不是桌面上。你能在JSFIDLE中这样做吗?我现在对如何解决这个问题有些困惑。。很抱歉,我还是一个JQuery的初学者。。
<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>
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(); });