jquery - 如何为桌面 View 禁用响应式移动菜单 jquery 命令

Question

我构建了一个 jquery 响应式导航菜单。根据需要在移动 View 中单击时，它会隐藏展开的列表项。但在桌面 View 中也会隐藏它们(不需要)。我是 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 像素时，它的行为方式与我希望的一样。但是当超过 510px 时，我这辈子都无法让列表项保持原状!任何帮助将不胜感激。以及(我敢肯定这是非常基本的!)经验教训。

干杯。

Answer 1

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

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

您对 ul 应用的任何样式都只会在屏幕尺寸为 510 像素或以下时应用。