jQuery hide() 方法使用 display:none !important 显示元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19000815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery hide() method do show element with display:none !important
提问by Pupil
I have assigned an element a class which has following CSS:
我为一个元素分配了一个具有以下 CSS 的类：
.cls {
display:none !important;
}
When I try to show this element with jQuery
当我尝试用 jQuery 显示这个元素时
$(".cls").show();
It does not work.
这是行不通的。
How can I hide this element?
我怎样才能隐藏这个元素？
回答by pai.not.pi
2 ways of doing this,
2种方法，
1) Remove the !importantfrom your .clsclass,
1）!important从你的.cls班级中删除，
.cls{
display: none;
}
But I assume, you'd have used this elsewhere so it might cause regression.
但我认为，你会在其他地方使用它，所以它可能会导致回归。
2) What you could alternatively do is, have a another class and toggle that,
2）你可以做的是，有一个另一个类并切换它，
.cls-show{
display: block !important;
}
And then in your javascript,
然后在你的 javascript 中，
$('.cls').addClass(".cls-show");
Then when you need to hide it again, you can,
然后当你需要再次隐藏它时，你可以，
$('.cls').removeClass('.cls-show');
This will help you keep your markup clean and readable
这将帮助您保持标记的清洁和可读性
回答by Virender Kumar Jangra
Although question has been asked long back but its still relevant for new coders/beginners. Generally this situation comes when you have already applied some class which overriding the displaybehavior using !importantproperty.
虽然很久以前就有人问过这个问题，但它仍然与新的编码员/初学者相关。通常，当您已经应用了一些display使用!important属性覆盖行为的类时，就会出现这种情况。
Other answers are also relevant to the question and its a matter of achieving the same goal with different approach. I would recommend to achieve it using already available classes in the same library (bootstrap here), instead of writing custom class as these days when most of us are using Bootstrap classesto build the layout.
其他答案也与该问题相关，这是用不同方法实现相同目标的问题。我建议使用同一个库中已经可用的类（这里是引导程序）来实现它，而不是像现在我们大多数人使用引导程序类来构建布局那样编写自定义类。
<div id='container' class="d-flex flex-row align-items-center">
.....
</div>
If you see in the above code, we are using d-flexclass for setting display property of this container. Now if I am trying to show/hidethis container using
如果您在上面的代码中看到，我们正在使用d-flex类来设置此容器的显示属性。现在，如果我尝试show/hide使用此容器
$('#container').show()
$('#container').show()
or
或者
$('#container').hide()
$('#container').hide()
It will not work as per expectation because of
它不会按预期工作，因为
- As
d-flexis already using!importantproperty - Jquery's
show()method will adddisplay:blocknotdisplay:flexto the css property of container.
- 正如
d-flex已经使用的!important财产 - jQuery的
show()方法将增加display:block不会display:flex对容器的CSS属性。
So I will recommend to use hiddenclass here.
所以我会推荐在hidden这里使用class。
To show container
显示容器
$('#container').removeClass('hidden')
$('#container').removeClass('hidden')
To hide container
隐藏容器
$('#container').addClass('hidden')
$('#container').addClass('hidden')
回答by Manish Kumar
回答by Ruben Serrate
If the only property in the CLS class selector is the display one, you can do this and don't need to add any extra classes or modify the inline style.
如果 CLS 类选择器中唯一的属性是显示属性，则可以执行此操作，而无需添加任何额外的类或修改内联样式。
To show them:
向他们展示：
$('.cls').removeClass("cls").addClass("_cls");
To hide them:
要隐藏它们：
$('._cls').removeClass("_cls").addClass("cls");
回答by BlackTigerX
Just had this exact issue, here's what I did first, I added another class to the element, such as:
刚刚有这个确切的问题，这是我首先做的，我向元素添加了另一个类，例如：
<div class="ui-cls cls">...</div>
Then in the javascript:
然后在javascript中：
$('.ui-cls').removeClass('cls').show();
The nice thing is that you can also have this code to hide it again:
好消息是您还可以使用此代码再次隐藏它：
$('.ui-cls').hide();
and it doesn't matter how many times you hide/show, it'll still work
不管你隐藏/显示多少次，它仍然有效
