2

我正在尝试通过 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 需要在超过 768px 的宽度上可见，以便桌面导航可见。

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

我想也许只在 767px 宽度下执行下推菜单功能，然后在上面的任何东西上简单地显示切换框 div。

4

2 回答 2

3

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

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

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

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

支持说明

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

于 2012-05-26T23:14:42.110 回答
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;
    });
});
于 2012-05-26T23:39:08.120 回答