jQuery show() for Twitter Bootstrap css 类隐藏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14610412/
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 show() for Twitter Bootstrap css class hidden
提问by Lim H.
I'm using Twitter Bootstrap and I notice that jQuery show()or fadeIn()doesn't make DOM element marked with class hiddenappear because the jQuery functions only remove the display: nonespecification. However, the visibilityis still set to hidden.
我正在使用 Twitter Bootstrap，我注意到 jQueryshow()或fadeIn()没有使带有 class 标记的 DOM 元素hidden出现，因为 jQuery 函数只删除了display: none规范。但是，visibility仍然设置为hidden。
I wonder what is the best possible way to work around this?
我想知道解决这个问题的最佳方法是什么？
- Remove the
hiddenclass on the element - Change the visibility property
- Overwrite the hidden class in my own css
- 删除
hidden元素上的类 - 更改可见性属性
- 在我自己的css中覆盖隐藏的类
In particular, I want to know whether fixing this with jQuery or css is better and why.
特别是，我想知道用 jQuery 还是 css 修复这个问题是否更好以及为什么。
回答by Eoinii
The css class you're looking for is .collapse. This sets the element to display: none;
您正在寻找的 css 类是.collapse. 这将元素设置为display: none;
So using $('#myelement').show()will work properly.
所以使用$('#myelement').show()将正常工作。
UPDATE :Bootstrap v3.3.6 has updated .collapse back to:
更新：Bootstrap v3.3.6 已将 .collapse 更新为：
.collapse {
display: none;
}
回答by David Fregoli
This will fade your invisible element in and remove the class
这将使您的不可见元素淡入并删除该类
$('#element.hidden').css('visibility','visible').hide().fadeIn().removeClass('hidden');
If you don't really need the element to be invisible (ie take up the space) tho you might wanna redefine .hidden (in you local css, don't change bootstrap source, or even better, in your local LESS file).
如果您真的不需要元素不可见（即占用空间），那么您可能想要重新定义 .hidden （在您的本地 css 中，不要更改引导程序源，或者甚至更好，在您的本地 LESS 文件中）。
回答by Ted Killilea
Warning:
警告：
bootstrap 3.3.0 just changed .collapse to:
bootstrap 3.3.0 刚刚将 .collapse 更改为：
.collapse {
display: none;
visibility: hidden;
}
Which is a breaking change for jQuery.show() I had to revert back to inlining:
这是 jQuery.show() 的重大更改，我不得不恢复为内联：
<div class="alert alert-danger" style="display:none;" >
</div>
to continue using jQuery as follows:
继续使用 jQuery，如下所示：
$('.alert').html("Change a few things up and try submitting again.").show()
The only class I could find in bootstrap 3.3.0 to apply just 'display:none' is
我能在 bootstrap 3.3.0 中找到的唯一一个只应用 'display:none' 的类是
.navbar {
display: none;
}
回答by guyaloni
I had the same problem. I used this patch:
我有同样的问题。我使用了这个补丁：
$(function() {
$('.hidden').hide().removeClass('hidden');
});
Then I had another problem, since my application generates new elements and append/prepend them. What I finally did is after genereting the new element I do:
然后我遇到了另一个问题，因为我的应用程序生成新元素并附加/添加它们。我最终做的是在生成我所做的新元素之后：
var newEl = ...;
$(newEl).find('.hidden').hide().removeClass('hidden');
回答by John Magnolia
For me it was because bootstrap is using the !importanthack for both class hide and hidden.
对我来说，这是因为 bootstrap!important对隐藏和隐藏类都使用了hack。
So you can't use the show()etc methods provided with jquery. Instead you have to overwrite even more horrible code overwriting the hacky code.
所以你不能使用show()jquery 提供的etc 方法。相反，您必须覆盖更糟糕的代码来覆盖 hacky 代码。
$('#myelement').attr('style', 'display: block !important');
!important is a last resort option and really shouldn't be used in a core library like bootstrap.
!important 是最后的选择，真的不应该用在像引导程序这样的核心库中。
回答by Chloe
This works, but I'm going to try the first answer and change the classes to .collapse.
这有效，但我将尝试第一个答案并将类更改为.collapse.
.toggleClass('hidden')
