使用jQuery显示和隐藏div后，div不会通过CSS隐藏 [英] Div is not hiding via CSS after showing and hiding a div using jQuery

问题描述

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

I have a little web app in which I show and hide DIVs a lot. Sometimes, however, I need to add a CSS class to that div that hides the div (using display:none rather than jQuery's hide() function) because I still need to know if the given div was initial shown on the screen. I typically use jQuery's addClass and removeClass accordingly.

但是，这样做时我遇到了问题.似乎如果div已经被隐藏并显示过，则在div中添加display:none类将无法正常工作.

However, I am running into a problem when doing this. It seems like if the div has been hidden and shown before, adding a display:none class to the div will not work.

我想知道是否可以进行任何类型的工作而无需借助hide().

I was wondering if there was any kind of work around that I could use without resorting to using hide().

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

Here are some JSFiddle examples to show you what I am talking about:

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

JSFiddle Example 1 - Will properly Hide the DIV using the CSS class.

JSFiddle示例2 -使用show()和hide()函数后，它将无法正确隐藏使用CSS类的DIV.

JSFiddle Example 2 - After using the show() and hide() functions, it will not properly hide the DIV using the CSS class.

推荐答案

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

The problem you encounter is that jQuery's hide()-function adds inline CSS to the element:

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

其中显示设置为block，因此您的hideDiv类将被内联覆盖，因为它在CSS规则中被视为更严格".一个比较丑陋的解决方法是将您的hideDiv CSS规则更改为:

Where display is set to block, so your hideDiv class will get overwritten by the inline since it's considered "stricter" in CSS rules. A somewhat ugly workaround to this is to change your hideDiv CSS rule to this:

.hideDiv
{
    display: none !important;
}

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

The !important part will make it take precedence over the inline CSS.

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

Edit: Additionally, I would recommend sticking with one way to show/hide stuff (your own or jQuery). Use jQuery show/hide for all showing/hiding but you can still add a class for tracking, just don't have that class hide your elements.

因此，将按钮JavaScript设置成类似这样的方式:

So chance the button JavaScript to something like this:

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

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

And completely remove the hiding CSS from the hideDiv class. Now you can still use jQuery to find the div(s) hidden after page-load without running into hiding/showing not working and without having to resort to !important.

我会说，这是一种更优雅的解决方案.

A more elegant solution to your issue, I'd say.

这篇关于使用jQuery显示和隐藏div后，div不会通过CSS隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！