27

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

.cls {
  display:none !important;
}

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

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

这没用。

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

4

6 回答 6

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

演示

于 2013-09-25T09:16:53.790 回答
7

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

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

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

于 2019-11-26T02:43:55.817 回答
5

2种方法，

1）!important从你的.cls班级中删除，

.cls{
   display: none;
}

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

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

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

然后在你的javascript中，

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

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

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

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

于 2013-09-25T09:18:35.187 回答
1

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

所以这样做：

.cls {
  display:none
}

另请参阅

于 2013-09-25T09:20:24.680 回答
1

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

向他们展示：

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

要隐藏它们：

$('._cls').removeClass("_cls").addClass("cls");
于 2013-09-25T09:22:03.793 回答
1

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

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

然后在javascript中：

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

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

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

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

于 2015-12-02T22:54:37.110 回答