用于Twitter引导css类的jQuery show（）隐藏

我正在使用Twitter引导，我注意到jQuery

show（）

或

fadeIn（）

不会使标有class

hidden

的DOM元素出现，因为jQuery函数只删除

display:none

规范。但是，

可见性

仍然设置为

隐藏

我想知道解决这个问题的最佳方法是什么

删除元素上的

隐藏的
类

更改可见性属性

在我自己的css中覆盖隐藏的类

---

特别是，我想知道用jQuery或css修复这个问题是否更好，以及为什么。

这将淡入不可见元素并删除该类

$('#element.hidden').css('visibility','visible').hide().fadeIn().removeClass('hidden');

---

如果您真的不需要元素不可见（即占用空间），那么您可能需要重新定义.hidden（在本地css中，不要更改引导源，或者更好，在本地LESS文件中）。

我也有同样的问题。我使用了这个补丁：

$(function() {
  $('.hidden').hide().removeClass('hidden');
});

然后我遇到了另一个问题，因为我的应用程序生成新元素并附加/前置它们。我最后做的是在生成我所做的新元素之后：

var newEl = ...;
$(newEl).find('.hidden').hide().removeClass('hidden');

---

您正在查找的css类是

.collapse

。这将元素设置为

display:none

因此，使用
$（'#myelement'）.show（）
将正常工作

更新：
Bootstrap v3.3.6已更新。折叠回：

.collapse {
  display: none;
}

对我来说，这是因为bootstrap使用了
！重要信息
hack用于隐藏和隐藏类

因此，您不能使用jquery提供的
show（）
etc方法。相反，你必须覆盖更可怕的代码覆盖黑客代码

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

!！“重要信息”是最后的选择，不应在引导之类的核心库中使用。
警告：

bootstrap 3.3.0刚刚更改。折叠为：

.collapse {
  display: none;
  visibility: hidden;
}

这对jQuery.show（）来说是一个突破性的改变，我不得不恢复到内联：

<div class="alert alert-danger" style="display:none;" >
</div>      

我在Bootstrap3.3.0中找到的唯一一个只应用“display:none”的类是

.navbar {
  display: none;
}

这是可行的，但我将尝试第一个答案，并将类更改为
.collapse

.toggleClass('hidden')

我通常不使用{visibility:hidden}，因为它会让DOM中的元素占用空间。有什么原因需要这样做吗？@isherwood的
可见性：隐藏的
来自引导响应。谢谢为我工作！我简化为do:：fadeIn（）.removeClass（'hidden'）-无需直接操作css或隐藏。请参阅@IrishJoker发布的答案。对于要使用javascript显示的元素，不应使用
.hidden
。改为使用
.collapse
。这应该是公认的答案。它还适用于
.slideDown（）
，
.fadeIn（）
等。
引导中隐藏的
用于您不想显示的内容。它在引导3中是新的吗？不-我在文档中看到过它。这一行取自v2.3.2示例。不幸的是，这个答案不再适用于Boostrap 3
.collapse
现在还可以设置
可见性：隐藏在我的Bootstrap 3中工作？我看不出Bootstrap有什么好的理由这样做。我个人总是有另一个css文件，用于“覆盖”css设置-我会替换.collapse以只显示设置。这样，你就可以继续前进，而不用担心一切都会破裂。消息中的痛苦：（Bootstrap 3.3.x中的解决方案是使用
.collapse（'hide'）
和
.collapse（'show'）
而不是jQuery的方法。您可以通过类
collapse
（隐藏）或
collapse in
（显示）直接在HTML中设置初始可见性）。请参阅。最新版本3.3.6已还原此更改
.toggleClass('hidden')