jquery - Twitter Bootstrap css 类的 jQuery show() 隐藏

Question

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

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

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

score 127 · Accepted Answer

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

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

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

.collapse {
  display: none;
}

score 21 · Accepted Answer

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

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

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

score 14 · Accepted Answer

警告：

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;
}

score 5 · Accepted Answer

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

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

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

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

score 4 · Accepted Answer

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

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

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

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

score 4 · Accepted Answer

4

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

.toggleClass('hidden')

于 2016-02-06T17:09:08.450 回答

6 回答 6