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

DEMO

虽然这个问题很久以前就被问到了，但是对于新的编码者/初学者来说仍然是相关的。通常情况下，当你已经应用了一些使用!important属性覆盖display行为的类时，就会出现这种情况。
其他答案也与这个问题相关，这是一个用不同的方法实现相同目标的问题。我建议使用同一库中已经可用的类来实现它（这里是 Bootstrap ），而不是像现在我们大多数人使用** Bootstrap 类**来构建布局那样编写自定义类。

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

如果你在上面的代码中看到，我们正在使用d-flex类来设置这个容器的display属性。
$('#container').show()

或

$('#container').hide()
它不会按预期工作，因为
1.由于d-flex已在使用!important属性

1. Jquery的show()方法会将display:block而不是display:flex添加到container的css属性中。
   因此，我建议在这里使用**hidden**类。

显示容器

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

隐藏容器

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

有两种方法，
1)从.cls类中删除!important，

.cls{
   display: none;
}

但我猜你会在其他地方用这个所以可能会导致退化。
2)你也可以选择另一个类，然后切换到另一个类，

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

然后在你的javascript里

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

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

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

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

！重要;删除所有规则并应用定义为！重要的css;。因此，在您的示例中，它将忽略所有规则并应用display：none。

所以这样做：

.cls {
  display:none
}

参见this also

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

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

要隐藏它们：

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

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

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

然后在javascript中：

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

好的一面是，你也可以用下面的代码来隐藏它：

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

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