jQuery show element with display:none !important

jQuery show element with display:none !important

本文关键字：none important display show element with jQuery      更新时间：2023-09-26

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

.cls {
  display:none !important;
}

当我尝试使用 jQuery 显示此元素时

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

它不起作用。

如何显示此元素？

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

演示

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

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

<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')

2 种

方法，

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

.cls{
   display: none;
}

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

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

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

然后在你的JavaScript中，

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

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

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

这将帮助您保持标记干净且可读

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

所以这样做：

.cls {
  display:none
}

另请参阅此内容

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

要向他们展示：

$('.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();

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

相关文章：