admin管理员组

文章数量:1321239

I am trying to use .hide() to hide the anchor element when it is less than 500px width and .show() again when the window size is greater than 500px width.

So it changes depending on the window size.

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>

I am trying to use .hide() to hide the anchor element when it is less than 500px width and .show() again when the window size is greater than 500px width.

So it changes depending on the window size.

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>
Share Improve this question edited Jan 9, 2016 at 7:43 Venkat.R 7,7465 gold badges43 silver badges68 bronze badges asked Jan 9, 2016 at 4:06 TimTim 1372 silver badges8 bronze badges 1
  • Doing this in javascript is like driving a bus up a flight of stairs! Use media queries, such as wmehanna's answer. – aaaidan Commented Jan 25, 2016 at 21:21
Add a ment  | 

3 Answers 3

Reset to default 4

You have to get the current width inside checkWidth() function so that it's the latest value:

$(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);
});

Probably should also change one of the parisons to include the 500 value so you do something when the width is exactly 500. And, I switched the code to use an if/else rather than two if statements.

You could also just use .toggle() and pass it a boolean:

$(document).ready(function() {

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

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

And, you could implement all of this with CSS media query rules too and not have to use Javascript.

Using Javascript to show/hide a DOM element is not recmended since the best way to acheive this is to use css @Mediaquery properties.

Here's an example :

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

Using Jquery.Get current width using $(window).width()

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

Using CSS

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

本文标签: jqueryHide() and show() on window resize in JavaScriptStack Overflow