jquery - 使用 jQuery 显示和隐藏 div 后，Div 不会通过 CSS 隐藏

Question

我有一个小网络应用程序，我在其中经常显示和隐藏 DIV。然而，有时我需要向那个隐藏 div 的 div 添加一个 CSS 类(使用 display:none 而不是 jQuery 的 hide() 函数)，因为我仍然需要知道给定的 div 是否最初显示在屏幕上。我通常相应地使用 jQuery 的 addClass 和 removeClass。

但是，我在执行此操作时遇到了问题。看起来如果 div 之前已经被隐藏和显示，添加一个 display:none 类到 div 是行不通的。

我想知道是否有任何类型的解决方法可以在不使用 hide() 的情况下使用。

这里有一些 JSFiddle 示例向您展示我在说什么:

JSFiddle Example 1 - 将使用 CSS 类正确隐藏 DIV。

JSFiddle Example 2 - 使用 show() 和 hide() 函数后，将无法使用 CSS 类正确隐藏 DIV。

Answer 1

您遇到的问题是 jQuery 的 hide() 函数向元素添加了内联 CSS:

<div id="divTest" class="hideDiv" style="display: block;">

display 设置为 block，因此您的 hideDiv 类将被内联覆盖，因为它在 CSS 规则中被认为是“更严格的”。一个有点难看的解决方法是将 hideDiv CSS 规则更改为:

.hideDiv
{
    display: none !important;
}

!important 部分将使其优先于内联 CSS。

编辑: 此外，我建议坚持使用一种显示/隐藏内容的方法(您自己的或 jQuery)。使用 jQuery show/hide 进行所有显示/隐藏，但您仍然可以添加一个用于跟踪的类，只是不要让该类隐藏您的元素。

因此将按钮 JavaScript 改成这样:

$("#btnHideDiv").on("click", function()
{
    $("#divTest").addClass("hideDiv");
    $("#divTest").hide();
});

并从 hideDiv 类中完全删除隐藏的 CSS。现在，您仍然可以使用 jQuery 查找页面加载后隐藏的 div，而不会遇到隐藏/显示不起作用的情况，也不必求助于 !important。

对于您的问题，我会说是一个更优雅的解决方案。