jQuery show()用于隐藏Twitter Bootstrap css类

Question

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

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

特别是,我想知道用jQuery或css修复它是否更好以及为什么.

Answer 1

你正在寻找的CSS课程是.collapse.这会将元素设置为display: none;

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

更新: Bootstrap v3.3.6已更新.collapse回到:

.collapse {
  display: none;
}

Answer 2

这将淡化您的隐形元素并删除该类

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

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

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

Answer 4

我有同样的问题.我用过这个补丁:

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

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

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

Answer 5

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

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

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

!important 是最后的选择，确实不应该在像 bootstrap 这样的核心库中使用。

Answer 6

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

.toggleClass('hidden')