如何使用Twitter Bootstrap隐藏元素并使用jQuery显示它？正确的答案

javascript jquery html css twitter-bootstrap

2022-08-30 00:29:02

假设我创建了一个这样的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显示它的最简单方法是什么？

答案 1

正确的答案

Bootstrap 4.x

Bootstrap 4.x 使用新的 .d-none 类。如果您使用 Bootstrap 4.x，则不要使用 .hidden 或 .hide，请使用 .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

首先，不要使用！使用 .hidden。正如其他人所说，已被弃用，.hide.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类，它有一个非常小的用例。的定义在文档中。.showshowhiddeninvisible

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

答案 2

只是：

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

或者，如果您以某种方式希望该类仍然存在：

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