小编典典

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

all

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

阅读 134

2022-05-19

共1个答案

小编典典

正确答案

引导程序 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');

（感谢方明的评论）

引导程序 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;
}

2022-05-19