使用 jQuery 显示和隐藏 div 后，div 没有通过 CSS 隐藏答案

【问题标题】：Div is not hiding via CSS after showing and hiding a div using jQuery使用 jQuery 显示和隐藏 div 后，div 没有通过 CSS 隐藏
【发布时间】：2012-08-05 16:19:08
【问题描述】：

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

但是，我在执行此操作时遇到了问题。看起来如果 div 之前已隐藏并显示，则向 div 添加 display:none 类将不起作用。

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

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

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

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

【问题讨论】：

标签： jquery css

【解决方案1】：

你遇到的问题是 jQuery 的 hide()-function 给元素添加了内联 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。

我会说，一个更优雅的解决您的问题的方法。

【讨论】：

我喜欢丑。这是迄今为止我的问题最简单和最简单的解决方案。谢谢。

【解决方案2】：

试试这个：

http://jsfiddle.net/LgL4v/2/

它只是使用 Javascript/jQuery 将 div 的显示属性设置为无而不是依赖 CSS 类。

【讨论】：

【解决方案3】：

这是因为 Jquery hide()/show() 放置了一个内联显示属性来隐藏或显示 div。所以你的课没有被申请。使用hide()/show()后可以使用.css('display','')清理div

【讨论】：

【解决方案4】：

我也经常这样做——我的解决方案是根本不使用 .hide()/show，而只需创建一个“隐藏”css 类并像你所做的那样切换或添加/删除。

这样做的一个好处是您可以查询 .hasClass 以查看它是否（被该类隐藏）如果您需要知道当前状态，并且如果您希望它最初隐藏，您可以简单地将该类添加到元素标记。

【讨论】：

【解决方案5】：

你可以试试吗？

 .hideDiv 
 {
    opacity:0;
}

【讨论】：