我正在使用 Twitter Bootstrap,我注意到 jQuery show()
orfadeIn()
不会使标有类的 DOM 元素hidden
出现,因为 jQuery 函数仅删除display: none
规范。但是,visibility
仍然设置为hidden
。
我想知道解决此问题的最佳方法是什么?
- 移除
hidden
元素上的类 - 更改可见性属性
- 覆盖我自己的css中的隐藏类
特别是,我想知道用 jQuery 或 css 解决这个问题是否更好以及为什么。
我正在使用 Twitter Bootstrap,我注意到 jQuery show()
orfadeIn()
不会使标有类的 DOM 元素hidden
出现,因为 jQuery 函数仅删除display: none
规范。但是,visibility
仍然设置为hidden
。
我想知道解决此问题的最佳方法是什么?
hidden
元素上的类特别是,我想知道用 jQuery 或 css 解决这个问题是否更好以及为什么。
您正在寻找的 css 类是.collapse
. 这将元素设置为display: none;
所以使用$('#myelement').show()
将正常工作。
更新: Bootstrap v3.3.6 已将 .collapse 更新为:
.collapse {
display: none;
}
这将使您的不可见元素淡入并删除该类
$('#element.hidden').css('visibility','visible').hide().fadeIn().removeClass('hidden');
如果您真的不需要元素不可见(即占用空间),那么您可能想要重新定义 .hidden (在您的本地 css 中,不要更改引导源,甚至更好,在您的本地 LESS 文件中)。
警告:
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;
}
我有同样的问题。我使用了这个补丁:
$(function() {
$('.hidden').hide().removeClass('hidden');
});
然后我遇到了另一个问题,因为我的应用程序会生成新元素并附加/前置它们。我最终所做的是在生成我所做的新元素之后:
var newEl = ...;
$(newEl).find('.hidden').hide().removeClass('hidden');
对我来说,这是因为 bootstrap 正在使用!important
hack 来进行类隐藏和隐藏。
所以不能使用show()
jquery 提供的 etc 方法。相反,您必须覆盖更可怕的代码来覆盖 hacky 代码。
$('#myelement').attr('style', 'display: block !important');
!important 是最后的选择,实际上不应该在像引导程序这样的核心库中使用。
这可行,但我将尝试第一个答案并将类更改为.collapse
.
.toggleClass('hidden')