Question

当窗口大小大于.hide()时，我尝试使用500px width隐藏锚元素，当它小于.show()和500px width时。

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

的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;}
}

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

3 个答案: