在JavaScript中调整窗口大小的Hide（）和show（）

Question

我试图使用.hide()来隐藏当小于500px width时的锚元素和当窗口大小大于500px width时再次.show() 。

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

的application.js

$(document).ready(function() {

 var windowWidth = $(window).width();

 function checkWidth() {
    if (windowWidth < 500) {
        $("#down-arrow a").hide()
    }
    if (windowWidth > 500){
        $("#down-arrow a").show()
    }
 }
 checkWidth() ;

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

的index.html

<div id="down-arrow">
   <a href="#"></a>
</div>

Answer 1

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

这是一个例子：

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

Answer 2

你必须得到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);
});

可能还应该更改其中一个比较以包含500值，以便在宽度正好为500时执行某些操作。 并且，我将代码切换为使用if / else而不是两个if语句。

你也可以使用.toggle()并传递一个布尔值：

$(document).ready(function() {

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

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

并且，您也可以使用CSS媒体查询规则实现所有这些，而不必使用Javascript。

Answer 3

使用$(window).width()使用Jquery.Get当前宽度

$(window).resize(setDivVisibility);
function setDivVisibility(){
     if (($(window).width()) < '500'){  
     $('#down-arrow a').css('display','none');  
     } else {  
     $('#down-arrow a').css('display','block');  
     } 
 }

使用CSS

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