89

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

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

  1. 移除hidden元素上的类
  2. 更改可见性属性
  3. 覆盖我自己的css中的隐藏类

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

4

6 回答 6

127

您正在寻找的 css 类是.collapse. 这将元素设置为display: none;

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

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

.collapse {
  display: none;
}
于 2014-08-13T11:19:34.857 回答
21

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

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

http://jsfiddle.net/7qxVL/

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

于 2013-01-30T17:54:12.647 回答
14

警告:

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;
}
于 2014-11-02T16:26:08.963 回答
5

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

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

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

var newEl = ...;
$(newEl).find('.hidden').hide().removeClass('hidden');
于 2014-02-03T10:03:00.240 回答
4

对我来说,这是因为 bootstrap 正在使用!importanthack 来进行类隐藏和隐藏。

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

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

!important 是最后的选择,实际上不应该在像引导程序这样的核心库中使用。

于 2014-10-20T11:04:28.083 回答
4

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

.toggleClass('hidden')
于 2016-02-06T17:09:08.450 回答