是否可以仅在特定浏览器宽度下执行功能？

Question

我正在尝试通过 CSS 媒体查询从我的“桌面”网站创建一个移动网站。

我有一个简单的下拉菜单（桌面），可以转换为下推菜单（移动）。浏览器宽度超过 768 像素时为桌面加载 css，而在 767 像素以下的任何地方加载移动下推菜单。

问题是下推菜单需要一个 js 文件才能正常工作。 js文件强制隐藏包含菜单的div。因此，在 767 像素的浏览器宽度下，下推工作正常，在 768 像素时，桌面导航不可见。

我是 JavaScript 和 Jquery 的新手，但我尝试使用我的最少知识使其有效运行。我需要它尽可能简单，因为站点必须尽可能小。

目前这是我最接近正常运行的方法：

function hideDiv(){
    if ($(window).width() < 768) {

        $(".togglebox").hide();

    }else{

        $(".togglebox").show();

    }

}

//run on document load and on window resize
$(document).ready(function () {

    //on load
    hideDiv();

    //on resize
    $(window).resize(function(){
        hideDiv();
    });

});


$(document).ready(function(){

    $(".togglebox").hide();

    $("h1").click(function(){

    $(this).next(".togglebox").slideToggle("slow");
    return true;
    });
});

注意事项：

切换框 div 需要隐藏才能使下推菜单起作用，但相同的 div 需要在超过 768 像素的宽度上可见，以便桌面导航可见。

上面的代码使它工作正常，但是当我输入页面 url 时，在我尝试调整浏览器宽度之前没有导航。我知道我有两个 (document).ready 函数，也许这就是问题所在，但是我尝试过使用代码，但没有任何运气。一定有一个我忽略的简单解决方案？

我想可能只在 767px 宽度以内执行下推菜单功能，然后在此之上执行任何操作以简单地显示切换框 div。

Answer 1

当您已经在使用媒体查询时，无需加载 JavaScript 文件来隐藏元素。例如，我可以将.toggleBox 隐藏在宽度不超过 767 像素的任何窗口中：

@media screen and ( max-width: 767px ) {
  .toggleBox {
    display:none;
  }
}

没有任何理由使用 JavaScript 轮询浏览器的宽度来完成媒体查询的发明。

演示：http://jsfiddle.net/HPsu8/show/

支持说明

正如下面的 cmets 所指出的，旧版本的 Internet Explorer 不支持媒体查询。如果您希望使用它们，同时保持对旧版本 IE 的支持，请考虑使用 polyfill。你可以在这里找到几个：https://github.com/Modernizr...HTML5-Cross-Browser-Polyfills

Answer 2

您的代码在页面首次加载时不起作用，因为您总是在页面首次加载时隐藏它。无需在页面首次加载时始终隐藏它，您只需调用已有的函数hideDiv()，它将确定它最初是否应该可见。将您的代码更改为此（删除.hide() 行并让对hideDiv() 的一次调用完成它的自然工作）：

function hideDiv(){
    if ($(window).width() < 768) {
        $(".togglebox").hide();
    }else{
        $(".togglebox").show();
    }
}

//run on document load and on window resize
$(document).ready(function () {
    //on load
    hideDiv();

    //on resize
    $(window).resize(function(){
        hideDiv();
    });
});


$(document).ready(function(){
    $("h1").click(function(){
        $(this).next(".togglebox").slideToggle("slow");
        return true;
    });
});