jQuery hide() 方法使用 display:none !important 显示元素

Question

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

.cls {
  display:none !important;
}

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

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

它不起作用。

我怎样才能隐藏这个元素？

Answer 1

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

演示

Answer 2

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

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

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

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

$('#container').show()

或

$('#container').hide()

它不会按预期工作，因为

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

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

显示容器

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

隐藏容器

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

Answer 3

2种方法，

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

.cls{
   display: none;
}

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

2）你可以做的是，有一个另一个类并切换它，

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

然后在你的 javascript 中，

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

然后当你需要再次隐藏它时，你可以，

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

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

Answer 4

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

所以这样做：

.cls {
  display:none
}

见这也

Answer 5

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

向他们展示：

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

要隐藏它们：

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

Answer 6

刚刚有这个确切的问题，这是我首先做的，我向元素添加了另一个类，例如：

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

然后在javascript中：

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

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

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

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