jquery - 在更大和更小的设备上显示事件后的 div

Question

我有一个 div，我想将其隐藏在较小的设备上并仅在电影结束后显示它们。 在更大的设备上，我想显示这个 div 而不管电影。

所以我所做的就是在第 1 行和

给这个 div display: none

@media (min-width: 900px){
  .movie_box{
    display: block;
  }
}

在我的代码中，电影结束后:

$('.movie_box').show();

这在较小的设备上运行良好，我可以在影片结尾看到这个 div。

在更大的设备上，当这个 div 已经显示时，代码似乎不起作用，因为当我向下滚动屏幕尺寸时我看不到这个 div。 display: none 保留。

Answer 1

将您的媒体查询更改为:

CSS:

.movie_box{
    display: none; // this will hide div for each screen sizes
}

@media (min-width: 900px){
  .movie_box.unhidden{
    display: block; // this shows div for big sizes 
                    //but only when it have .unhidden class
  }
}

JS:

$('.movie_box').addClass('unhidden'); // this will add unhidden class after movie will end