是否可以仅在特定的浏览器宽度上执行函数？
我正在尝试通过CSS媒体查询从我的‘桌面’站点创建一个移动网站。
我有一个简单的下拉菜单(桌面)，可以转换为一个下拉菜单(移动)。css在浏览器宽度超过768px的任何位置为桌面加载，移动下拉菜单在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;
});
});备注：
togglebox div需要隐藏才能使用下拉菜单，但是相同的div需要在超过768px的宽度下可见才能使桌面导航可见。
上面的代码让它工作得很好，但是当我输入页面url时，直到我尝试调整浏览器宽度时才会出现导航。我知道我有两个(文档).ready函数，也许这就是问题所在，但我试着尝试了代码，但我没有任何运气。一定有一个我忽略的简单解决方案？
我想也许可以只在767px宽度的任何地方执行下拉菜单功能，然后再执行任何超过767px宽度的功能，以简单地显示togglebox div。
回答 2
Stack Overflow用户
发布于 2012-05-27 07:39:08
当页面第一次加载时，您的代码不起作用，因为您总是在页面第一次加载时隐藏它。您只需调用已有的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;
});
});Stack Overflow用户
发布于 2012-05-27 07:14:42
当你已经在使用媒体查询时，你不需要加载JavaScript文件来隐藏元素。例如，我可以在宽度不超过767像素的任何窗口中隐藏.toggleBox：
@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
https://stackoverflow.com/questions/10770444
复制相似问题
腾讯云开发者
