Question

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

我有一个简单的下拉菜单（桌面），可以转换为下推菜单（移动）。在浏览器宽度为768px的任何地方加载桌面的css，移动下拉菜单加载到767px以下的任何内容。

问题是下推菜单需要js文件才能正常运行。 js文件强制隐藏包含菜单的div。所以浏览器宽度达到767px，下推工作正常，在768px时桌面导航不可见。

我是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才能使下拉菜单正常工作，但是需要以超过768px的宽度显示相同的div才能使桌面导航可见。

上面的代码使它工作正常，但是当我输入页面url时，在我尝试调整浏览器宽度之前没有导航。我知道我有两个（文件）.ready功能，也许这就是问题，但我尝试过使用代码，但我没有运气。必须有一个我忽略的简单解决方案？

我认为可能只在高达767px宽度的任何地方执行下推菜单功能，然后高于此值只需显示切换框div。

Answer 1

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

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

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

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

支持说明

正如下面的评论中所指出的，旧版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;
    });
});

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

2 个答案:

支持说明