我怎样才能覆盖jQuery hide（）函数？

Question

我有一个返回顶部锚点图像，当用户点击它时，它会使用js动画返回顶部。我首先用js隐藏了图标，直到它到达某一点，然后它会显示出来。这很好。

这是我的问题。在我的@media查询中，我不希望从0px到480px视口显示回到顶部的图标。所以在0px到480px的@media查询中，我将图标设置为display：none。但它仍然显示出来。我知道强迫它展示的js。

如何仅覆盖0到480px的js hide（）函数？

Answer 1

您可以在CSS（以及480px媒体查询中）中使用!important - 这将覆盖jQuery应用的内联样式：

@media (max-width: 480px) {
    .logo{
        display: none !important;
    }
}

更好的解决方案是修改您的JavaScript，使其不会以该宽度显示它！

Answer 2

jQuery hide()＆amp; show()直接在元素上设置显示属性。

e.g。 <div class="hide" style="display: block">...</div>

由于hierarchy of specificity，在这种情况下，您的样式表属性将被覆盖。如果用jQuery设置显示器很重要，但是你不想在宽度低于480px时显示元素，那么你需要使用一些条件逻辑来show()或hide()酌情。

像if (480 > window.innerWidth) { $('.hide').hide(); }

这样的东西