如何使用Twitter Bootstrap隐藏元素并使用jQuery显示它？

Question

假设我创建了一个这样的HTML元素,

<div id="my-div" class="hidden">Hello, TB3</div>
<div id="my-div" class="hide">Hello, TB4</div>
<div id="my-div" class="d-none">Hello, TB4</div>

我怎样才能从jQuery/Javascript中显示和隐藏HTML元素.

JavaScript的:

$(function(){
  $("#my-div").show();
});

结果:(与其中任何一个).

我希望隐藏上面的元素.

使用Bootstrap隐藏元素并使用jQuery显示它的最简单方法是什么？

Answer 1

正确的答案

Bootstrap 4.x

Bootstrap 4.x使用新.d-none类.而不是使用任何一个 .hidden,或者.hide如果你使用Bootstrap 4.x使用.d-none.

<div id="myId" class="d-none">Foobar</div>

• 要表明: $("#myId").removeClass('d-none');
• 要隐藏它: $("#myId").addClass('d-none');
• 要切换它: $("#myId").toggleClass('d-none');

(感谢方明的评论)

Bootstrap 3.x

首先,不要使用.hide!使用.hidden.正如其他人所说,.hide已被弃用,

.hide可用,但它并不总是影响屏幕阅读器,自v3.0.1起不再使用

其次,使用jQuery的.toggleClass() ,.addClass()和.removeClass()

<div id="myId" class="hidden">Foobar</div>

• 要表明: $("#myId").removeClass('hidden');
• 要隐藏它: $("#myId").addClass('hidden');
• 要切换它: $("#myId").toggleClass('hidden');

不要使用css类.show,它有一个非常小的用例.的定义show,hidden并invisible在该文档.

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

Answer 2

只是:

$(function(){
  $("#my-div").removeClass('hide');
});

或者,如果你想以某种方式仍然在那里:

$(function(){
  $("#my-div").css('display', 'block !important');
});

Answer 3

该hide班是有用的,以保持隐藏在页面加载内容.

我的解决方案是在初始化期间,切换到jquery的隐藏:

$('.targets').hide().removeClass('hide');

然后show(),hide()应该正常运作.

Answer 4

使用bootstrap .collapse而不是.hidden

稍后在JQuery中,您可以使用.show()或.hide()来操作它

Answer 5

解决这个烦恼的另一种方法是创建自己的CSS类,它不会在规则的末尾设置!important,如下所示:

.hideMe {
    display: none;
}

并使用如下:

<div id="header-mask" class="hideMe"></div>

现在jQuery隐藏起作用

$('#header-mask').show();

Answer 6

@ dustin-graham的方法概述了我是如何做到的.还要记住,bootstrap 3现在根据getbootstrap的文档使用"隐藏"而不是"隐藏" .所以我会做这样的事情:

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

然后每当使用jQuery show()和hide()方法时,都不会发生冲突.

Answer 7

用这样的方式启动元素:

<div id='foo' style="display: none"></div>

然后,使用您想要显示的事件,如下所示:

$('#foo').show();

我相信最简单的方法.