【问题标题】：jQuery hide() method do show element with display:none !importantjQuery hide() 方法使用 display:none !important 显示元素
【发布时间】：2013-09-30 19:16:04
【问题描述】：

我已经为一个元素分配了一个具有以下 CSS 的类：

.cls {
  display:none !important;
}

当我尝试用 jQuery 显示这个元素时

$(".cls").show();

它不起作用。

如何隐藏这个元素？

【问题讨论】：

你想hide还是show？
你无法使用 show 隐藏。
:) 抱歉，我想显示

标签： javascript jquery html css

【解决方案1】：

$('.cls').attr('style','display:block !important');

DEMO

【讨论】：

不推荐内联样式，这使得标记很难维护。
@TarunPai 不假！使用 toggleClass() 逻辑可能是更好的方法，但可能取决于 OP 正在寻找什么
@A.Wolff 是的 :) 答案绝对是合法的。
与.css()相比有什么好处？
@BramVanroy .css() 方法不能在这里使用，因为你不能摆脱 !important statment

【解决方案2】：

两种方法，

1) 从 .cls 类中删除 !important，

.cls{
   display: none;
}

但我想，你会在其他地方使用它，所以它可能会导致回归。

2) 你可以选择做的是，拥有另一个类并切换它，

.cls-show{
  display: block !important;
}

然后在你的 javascript 中，

$('.cls').addClass(".cls-show");

那么当你需要再次隐藏它时，你可以，

$('.cls').removeClass('.cls-show');

这将帮助您保持标记的清洁和可读性

【讨论】：

【解决方案3】：

!important; 删除所有规则并应用定义为 !important; 的 css。因此，在您的情况下，它会忽略所有规则并应用 display:none。

这样做：

.cls {
  display:none
}

见this also

【讨论】：

【解决方案4】：

如果 CLS 类选择器中的唯一属性是显示属性，则可以这样做，无需添加任何额外的类或修改内联样式。

向他们展示：

$('.cls').removeClass("cls").addClass("_cls");

隐藏它们：

$('._cls').removeClass("_cls").addClass("cls");

【讨论】：

【解决方案5】：

刚刚遇到了这个确切的问题，这就是我所做的首先，我为元素添加了另一个类，例如：

<div class="ui-cls cls">...</div>

然后在javascript中：

$('.ui-cls').removeClass('cls').show();

好消息是您还可以使用此代码再次隐藏它：

$('.ui-cls').hide();

不管你隐藏/显示多少次，它仍然有效

【讨论】：

【解决方案6】：

尽管很久以前就有人问过这个问题，但它仍然与新的编码人员/初学者有关。通常，当您已经应用了一些使用!important 属性覆盖display 行为的类时，就会出现这种情况。

其他答案也与该问题相关，并且是用不同方法实现相同目标的问题。我建议使用同一个库中已经可用的类（此处为引导程序）来实现它，而不是像现在我们大多数人都使用 Bootstrap 类 来构建布局那样编写自定义类。

<div id='container' class="d-flex flex-row align-items-center">
.....
</div>

如果您在上面的代码中看到，我们正在使用d-flex 类来设置此容器的显示属性。现在如果我想show/hide这个容器使用

$('#container').show()

或

$('#container').hide()

它不会按预期工作，因为

由于d-flex 已经在使用!important 属性
Jquery 的show() 方法会将display:block 而不是display:flex 添加到容器的css 属性中。

所以我会推荐在这里使用 hidden 类。

显示容器

$('#container').removeClass('hidden')

隐藏容器

$('#container').addClass('hidden')

【讨论】：

或班级.invisible