如何禁用桌面视图的响应式移动菜单 jquery 命令

Question

我已经构建了一个 jquery 响应式导航菜单。当在移动视图中单击时，它会根据需要隐藏展开的列表项。但在桌面视图中也会隐藏它们（不需要）。我是 jquery 的新手。我试过 enquire.js 但它似乎不起作用。我知道它应该，只是不确定我做错了什么。

我在这个论坛上查看了所有类似的问题，但似乎找不到适合我的答案。我确定这是我在彻底搜索后无法找到的非常简单的几行。这是我正在努力解决的（v.newbie）代码：

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

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

        $(window).resize(function(){
            var w = $(window).width();
            if(w > 510 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
        $(".scroll").click(function(){
                $("nav ul").hide(1000);
            });
    });

我已在此处将我正在处理的内容上传到 JSFiddle： http://jsfiddle.net/ConorMac/9qdd8784/

正如您将看到的，当断点低于 510 像素时，它的行为方式与我希望的方式一致。但是我一辈子都无法让列表项在 510 像素以上时保持不变！任何帮助将不胜感激。还有一个（我敢肯定！非常基础！）的经验教训。

干杯。

Answer 1

使用纯 CSS - @media 标签...

@media (max-width: 510px){
    ul{
        < styles go here >
    }
}

您对ul 应用的任何样式仅适用于屏幕尺寸为 510 像素或以下的情况。