Twitter Bootstrap CSS类的jQuery show（）已隐藏

89

我正在使用Twitter Bootstrap，我注意到jQuery show()或fadeIn()没有使用类标记的DOM元素hidden出现，因为jQuery函数仅删除了display: none规范。但是，那visibility仍设置为hidden。

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

删除hidden元素上的类
更改可见性属性
在我自己的CSS中覆盖隐藏的类

特别是，我想知道用jQuery还是css进行修复是否更好以及为什么。

jquery twitter-bootstrap

— 林H.
source

我通常不使用{visibility：hidden}，因为它将元素留在DOM中以占用空间。您是否有某些理由需要这样做？

— isherwood

1

@isherwood visibility: hidden来自引导程序响应。

— Lim H.

124

您要查找的CSS类是.collapse。这将元素设置为display: none;

因此，使用$('#myelement').show()将正常工作。

更新： Bootstrap v3.3.6已将.collapse更新回：

.collapse {
  display: none;
}

— in
source

2

这应该是公认的答案。它也可以与.slideDown()，.fadeIn()等一起使用，.hidden在Bootstrap中适用于您不想显示的内容。

— 卑鄙的2014年

引导程序3中有新功能吗？

— Lim H.

否-我已经在文档中看到了它。<div class =“ nav-collapse折叠”>这行摘自v2.3.2示例。

— Eoinii 2014年

33

不幸的是，该答案不再适用于Boostrap3。.collapse现在也可以设置visibility: hidden;

— Tom17，2014年

9

在我的Bootstrap 3中工作吗？

— James McCormack 2015年

21

这将淡化您不可见的元素并删除该类

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

http://jsfiddle.net/7qxVL/

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

— 大卫·弗雷格里（David Fregoli）
source

谢谢为我工作！我简化为：:: fadeIn（）。removeClass（'hidden'）-无需直接操作CSS或隐藏。

— dbrin

1

请参阅@IrishJoker发布的答案。您不应该使用.hidden要使用javascript显示的元素。使用.collapse代替。

— 卑鄙的

13

警告：

bootstrap 3.3.0刚刚更改了。折叠为：

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

这是jQuery.show（）的重大更改，我不得不恢复为内联：

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

继续使用jQuery，如下所示：

$('.alert').html("Change a few things up and try submitting again.").show()

我在引导程序3.3.0中可以找到的仅适用于'display：none'的唯一类是

.navbar {
  display: none;
}

— 泰德·基利拉
source

1

我看不到Bootstrap执行此操作的充分理由。我个人总是有另一个css文件，用于“覆盖” css设置-我将替换.collapse以仅具有显示设置。这样，您就可以继续前进而不必担心一切都会中断。消息中的疼痛:(

— Eoinii

Bootstrap 3.3.x中的解决方案是使用.collapse('hide')而.collapse('show')不是jQuery的方法。您可以通过collapse（隐藏）或collapse in（显示）类直接在HTML中设置初始可见性。请参阅getbootstrap.com/javascript/#collapse。

— alexw 2015年

最新版本3.3.6已恢复此更改

— Eoinii 2015年

5

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

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

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

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

— 盖亚洛尼
source

4

对我来说是因为引导程序正在使用 !important对类hide和hidden hack。

因此，您不能使用show()jquery提供的etc方法。取而代之的是，您必须覆盖更可怕的代码，才能覆盖hacky代码。

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

！important是不得已的选择，实际上不应该在诸如bootstrap之类的核心库中使用。

— 约翰木兰
source

4

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

.toggleClass('hidden')

— 克洛伊
source