Twitter Bootstrap css 类的 jQuery show() 隐藏答案

【问题标题】：jQuery show() for Twitter Bootstrap css class hiddenTwitter Bootstrap css 类的 jQuery show() 隐藏
【发布时间】：2013-01-14 15:31:49
【问题描述】：

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

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

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

特别是，我想知道用 jQuery 或 css 解决这个问题是否更好，为什么。

【问题讨论】：

我一般不使用 {visibility: hidden} 因为它让 DOM 中的元素占用空间。你有什么理由需要这样做吗？
@isherwood visibility: hidden 来自引导响应。

标签： jquery twitter-bootstrap

【解决方案1】：

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

所以使用$('#myelement').show() 会正常工作。

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

.collapse {
  display: none;
}

【讨论】：

这应该是公认的答案。它也适用于.slideDown()、.fadeIn() 等。Bootstrap 中的.hidden 是你不想显示的东西。
它是 bootstrap 3 中的新功能吗？
否 - 我在文档中看到它使用过。
此行取自 v2.3.2 示例。
不幸的是，这个答案不再适用于 Boostrap 3。.collapse 现在也设置了visibility: hidden;
在我的 Bootstrap 3 中工作？

【解决方案2】：

这将使你的不可见元素淡入并删除类

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

http://jsfiddle.net/7qxVL/

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

【讨论】：

感谢为我工作！我简化为只做 ::fadeIn().removeClass('hidden') - 无需直接操作 css 或隐藏。
查看@IrishJoker 发布的答案。您不应该将 .hidden 用于要使用 javascript 显示的元素。请改用.collapse。

【解决方案3】：

警告：

bootstrap 3.3.0 刚刚将 .collapse 更改为：

.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()

我可以在 bootstrap 3.3.0 中找到仅应用 'display:none' 的唯一类是

.navbar {
  display: none;
}

【讨论】：

我看不出 Bootstrap 这样做的充分理由。我个人总是有另一个 css 文件，用于“覆盖” css 设置 - 我将替换 .collapse 以仅具有显示设置。这样，您可以继续前进，而不必担心一切都会破裂。消息中的痛苦:(
Bootstrap 3.3.x 中的解决方案是使用.collapse('hide') 和.collapse('show') 代替jQuery 的方法。您可以通过 collapse（隐藏）或 collapse in（显示）类直接在 HTML 中设置初始可见性。见getbootstrap.com/javascript/#collapse。
最新版本 3.3.6 已恢复此更改

【解决方案4】：

我遇到了同样的问题。我用过这个补丁：

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

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

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

【讨论】：

【解决方案5】：

对我来说，这是因为 bootstrap 使用 !important hack 来进行类隐藏和隐藏。

所以你不能使用 jquery 提供的show() 等方法。相反，您必须覆盖更可怕的代码来覆盖 hacky 代码。

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

!important 是不得已而为之的选择，实际上不应该在像 bootstrap 这样的核心库中使用。

【讨论】：

【解决方案6】：

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

.toggleClass('hidden')

【讨论】：