jQuery无法与CSS媒体查询一起使用

Question

I have an element called ".left". Its css looks like this:

.left{
  float:right;
  background-repeat: no-repeat;
  width: 300px;
  height: 100%;}

I have a media query for this element that looks like this:

@media screen and (max-width: 570px) {
    .left{
      display: none;}
 }

What I'm trying to do is have a button named ".close" change it's function when the media query is activated. I want one,two,three to fadein if display:none and one,two,three,four to fadein if display does not = none. This is what I have so far in jquery:

<script>
    $( document ).ready(function($) {
        console.log( "ready!" );

        $(".close").on('click',function() {
            if ($(".left").css("display") == "none" ){
                $("#one,#two,#three").fadeIn();}
            else {
                $("#one,#two,#three,#four").fadeIn();}
        });
    });
</script>

However, what I've coded only executes the if condition and not the else condition... no matter what size the browser is.

I need some help! Thanks!

Answer 1

Try

:hidden Selector

.is()

$(document).ready(function ($) {
    console.log("ready!");
    $(".close").on('click', function () {
        if ($(".left").is(":hidden")) { //check if .left is hidden or not
            $("#one,#two,#three").fadeIn();
        } else {
            $("#one,#two,#three,#four").fadeIn();
        }
    });
});

Answer 2

You should be using media queries in javascript. See here:

https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

$( document ).ready(function($) {
    console.log( "ready!" );

    $(".close").on('click',function() {

      if(window.matchMedia("(max-width: 570px)").matches) {
        $("#one,#two,#three").fadeIn();}
      } else {
        $("#one,#two,#three,#four").fadeIn();}
      }

    });
});