javascript - 如何覆盖 jQuery hide() 函数？

Question

我有一个返回顶部的锚图像，当用户单击它时，它会通过 js 动画将他带回顶部。我先用js把图标隐藏了，到了一定的程度，它就会显示出来。这工作正常。

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

我将如何仅覆盖 0 到 480px 的 js hide() 函数？

score 2 · Accepted Answer

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

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

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

score -1 · Accepted Answer

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

例如<div class="hide" style="display: block">...</div>

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

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

2 回答 2