在JavaScript中调整窗口大小时隐藏（）和显示（）

我试图使用

.hide（）

在锚元素小于

500px宽度时隐藏锚元素，并在窗口大小大于
500px宽度时再次使用
.show（）

因此，它会根据窗口大小而变化

application.js

$（文档）.ready（函数（）{
var windowWidth=$（window.width（）；
函数checkWidth（）{
如果（窗宽<500）{
$（“#向下箭头a”）.hide（）
}
如果（窗口宽度>500）{
$（“#向下箭头a”）.show（）
}
}
检查宽度（）；
$（窗口）。调整大小（函数（）{
检查宽度（）；
});
});

index.html

使用Jquery。使用
$（窗口）获取当前宽度。宽度（）

不推荐使用Javascript显示/隐藏DOM元素，因为实现这一点的最佳方法是使用css@Mediaquery属性

下面是一个例子：

@media screen and (max-width: 500px) {
    #down-arrow a{
        display : none;
    }
}

您必须在
checkWidth（）
函数中获取当前宽度，以便它是最新的值：

$(document).ready(function() {

 function checkWidth() {
    var windowWidth = $(window).width();
    if (windowWidth <= 500) {
        $("#down-arrow a").hide();
    } else {
        $("#down-arrow a").show();
    }
 }
 checkWidth();

 $(window).resize(checkWidth);
});

而且，您也可以使用CSS媒体查询规则实现所有这些，而不必使用Javascript。
出于对所有优点的热爱，这是正确的方法，请使用媒体查询！在javascript中执行此操作就像驾驶公共汽车上一段楼梯！使用媒体查询，如wmehanna的回答。
$(window).resize(setDivVisibility);
function setDivVisibility(){
     if (($(window).width()) < '500'){  
     $('#down-arrow a').css('display','none');  
     } else {  
     $('#down-arrow a').css('display','block');  
     } 
 }

@media only screen and (max-device-width: 500px) {
    #down-arrow a{display:none;}
}

@media screen and (max-width: 500px) {
    #down-arrow a{
        display : none;
    }
}

$(document).ready(function() {

 function checkWidth() {
    var windowWidth = $(window).width();
    if (windowWidth <= 500) {
        $("#down-arrow a").hide();
    } else {
        $("#down-arrow a").show();
    }
 }
 checkWidth();

 $(window).resize(checkWidth);
});

$(document).ready(function() {

 function checkWidth() {
    $("#down-arrow a").toggle($(window).width() > 500);
 }
 checkWidth();

 $(window).resize(checkWidth);
});