或

Question

我有一个问题。

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

.cls {
  display:none !important;
}

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

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

它不起作用。

有人可以帮我解释如何隐藏这个元素吗？

Answer 1

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

Answer 2

这样做的两种方式，

1）从!important班级

中删除.cls

.cls{
   display: none;
}

但我认为，你已经在其他地方使用过它，这可能会导致回归。

2）你可以选择做的是，有另一个班级并切换，

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

然后在你的javascript中，

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

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

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

这将帮助您保持标记清晰易读

Answer 3

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

这样做：

.cls {
  display:none
}

Answer 4

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

向他们展示：

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

隐藏它们：

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

Answer 5

刚才有这个问题，这就是我的所作所为首先，我在元素中添加了另一个类，例如：

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

然后在javascript：

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

好消息是你也可以让这段代码再次隐藏它：

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

并且隐藏/显示多少次并不重要，它仍然有用

Answer 6

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

其他答案也与该问题有关，也关系到使用不同方法实现相同目标的问题。我建议使用同一库（此处为Bootstrap）中已有的类来实现它，而不是像当今大多数人使用 Bootstrap类构建布局那样编写自定义类。

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

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

来show/hide这个容器

$('#container').show()

$('#container').hide()

由于以下原因，它无法正常工作

所以我建议在这里使用 hidden 类。

显示容器

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

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