最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

jquery - Hide() and show() on window resize in JavaScript - Stack Overflow

programmeradmin5浏览0评论

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;}
}
发布评论

评论列表(0)

  1. 暂无评论