javascript - 如何使用 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 uses the new .d-none class . 如果您使用的是 Bootstrap 4.x，则不要使用 either .hidden 或 .hide，请使用 .d-无。

<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 is available, but it does not always affect screen readers and is deprecated as of 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的定义在docs .

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