Javascript jQuery hide（）方法使用display:none显示元素！重要的

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

.cls {
  display:none !important;
}

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

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

它不起作用

如何隐藏此元素

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

2种方法

1） 删除

！重要信息

来自您的

.cls

课程

.cls{
   display: none;
}

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

2） 你可以做的另一个选择是，创建另一个类并切换它

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

然后在javascript中

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

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

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

---

这将帮助您保持标记的干净和可读性

！重要的删除所有规则并应用定义为的css！重要的。因此，在您的情况下，它将忽略所有规则并应用显示：无

这样做：

.cls {
  display:none
}

---

请参见

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

向他们展示：

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

要隐藏它们，请执行以下操作：

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

---

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

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

很好的一点是，您还可以使用以下代码再次隐藏它：

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

---

不管你隐藏/显示多少次，它仍然会工作

尽管这个问题很久以前就被问过了，但它仍然与新的程序员/初学者相关。通常，当您已经应用了某个类，该类使用

覆盖了
显示
行为时，就会出现这种情况！重要信息

属性

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

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

.....

如果您在上面的代码中看到，我们正在使用

d-flex

类来设置此容器的显示属性。现在，如果我试图使用

$（“#容器”）.show（）

或

$（“#容器”）.hide（）

它将无法按照预期工作，因为

因为

d-flex

已经在使用

！重要信息

属性

Jquery的

show（）

方法将

display:block

not

display:flex

添加到容器的css属性中

因此，我建议在这里使用

隐藏的
类

展示容器
$（“#容器”）.removeClass（'hidden'）

隐藏容器
$（“#container”）.addClass（'hidden'）
您想
隐藏
还是
显示
？您不能使用show隐藏。：）很抱歉，我想显示我不建议使用内联样式，这使得标记很难维护。@TarunPai不是false！使用toggleClass（）逻辑可能是一种更好的方法，但可能取决于OP的外观for@A.Wolff是的：）答案绝对是合法的。这比
.css（）
有什么好处？@BramVanroy.css（）方法不能在这里使用，因为你无法摆脱这个问题！类的重要状态
。不可见

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