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

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

1 个答案: