0

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

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

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

以下是一些 JSFiddle 示例，向您展示我在说什么：

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

JSFiddle 示例 2 - 使用 show() 和 hide() 函数后，它不会使用 CSS 类正确隐藏 DIV。

4

5 回答 5

2

您遇到的问题是 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.

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

于 2012-08-08T14:24:22.570 回答
1

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

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

于 2012-08-08T14:21:40.750 回答
1

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

于 2012-08-08T14:23:43.480 回答
1

尝试这个：

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

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

于 2012-08-08T14:26:54.627 回答
0

你可以试试吗？

 .hideDiv 
 {
    opacity:0;
}​
于 2012-08-08T14:21:33.390 回答