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

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

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

我想知道是否有任何形式的工作，我可以使用，而不诉诸于hide()。

下面是一些例子的jsfiddle向你展示一下我说的：

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

JSFiddle Example 2 - 使用show（）和hide（）函数后，它不会使用CSS类正确隐藏DIV。

来源

2012-08-08 ROFLwTIME

你遇到的是jQuery的隐藏（）的问题之后清洁格 - 函数将内联CSS元素：

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

当显示器设置为block，所以您的hideDiv类将被内联覆盖，因为它在CSS规则中被视为“更严格”。一个有点丑陋的解决方法，这是你的hideDiv CSS规则改成这样：

.hideDiv 
{ 
    display: none !important; 
}

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

编辑：此外，我会建议用一种方式坚持显示/隐藏的东西（你自己或 jQuery的）。使用jQuery显示/隐藏所有显示/隐藏，但仍然可以添加一个类进行跟踪，只是没有该类隐藏您的元素。

所以机会按钮JavaScript来是这样的：

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

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

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

来源

2012-08-08 14:24:22 SilverSnake

我喜欢丑陋。这是迄今为止我的问题最简单和最简单的解决方案。谢谢。 – ROFLwTIME 2012-08-08 14:35:11

你可以试试，

.hideDiv 
{ 
    opacity:0; 
}

来源

2012-08-08 14:21:33

我这样做也有很多 - 我的解决办法是不使用.hide（）/显示所有，并简单地创建一个“隐藏”的CSS类和切换是或添加/删除你完成了。

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

来源

2012-08-08 14:21:40

它因为jquery hide()/show()放置一个内联显示属性来隐藏或显示div。所以你的班级不适用。可以使用.css('display','')使用hide()/show()

来源

2012-08-08 14:23:43 Jarry

试试这个：

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

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

来源

2012-08-08 14:26:54 vdelricco

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

回答

相关问题