Question

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

但是，这样做时遇到了问题。看起来如果之前已经隐藏并显示了div，添加了一个显示：div中的none类将无效。

我想知道是否有任何类型的工作可以使用，而无需使用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;">

如果将显示设置为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。

对于你的问题，我会说更优雅的解决方案。

Answer 2

我也做了很多 - 我的解决方案是不要使用.hide（）/ show，只需创建一个“隐藏”的css类并切换或者添加/删除。 / p>

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

Answer 3

因为Jquery hide()/show()放置一个内联显示属性来隐藏或显示div。所以你的班级没有得到应用。使用.css('display','')

后，您可以使用hide()/show()清除div

Answer 4

试试这个：

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

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

Answer 5

你可以试试吗;

 .hideDiv 
 {
    opacity:0;
}

在使用jQuery显示和隐藏div之后，Div没有通过CSS隐藏

5 个答案: