javascript - 如何使用Twitter Bootstrap隐藏元素并使用jQuery显示它？(How to hide element using Twitter Bootstrap and show it using jQuery?)

Question

Let's say I create an HTML element like this,

(假设我创建了一个这样的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>

How could I show and hide that HTML element from jQuery/Javascript.

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

JavaScript:

(JavaScript的：)

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

Result: (with any of these).

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

I would like the elements above to be hidden.

(我希望隐藏上面的元素。)

What is simplest way to hide element using Bootstrap and show it using jQuery?

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

  ask by psylosss translate from so

Answer 1

The right answer(正确的答案)

Bootstrap 4.x(Bootstrap 4.x)

Bootstrap 4.x uses the new .d-none class .

(Bootstrap 4.x使用新的.d-none类 。)

Instead of using either .hidden , or .hide if you're using Bootstrap 4.x use .d-none .

(而不是使用任何 .hidden ，或.hide如果你使用引导4.x的使用.d-none 。)

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

• To show it: $("#myId").removeClass('d-none');

  (要显示它： $("#myId").removeClass('d-none');)

• To hide it: $("#myId").addClass('d-none');

  (隐藏它： $("#myId").addClass('d-none');)

• To toggle it: $("#myId").toggleClass('d-none');

  (要切换它： $("#myId").toggleClass('d-none');)

(thanks to the comment by Fangming)

(（感谢方明的评论）)

Bootstrap 3.x(Bootstrap 3.x)

First, don't use .hide !

(首先，不要使用.hide ！)

Use .hidden .

(使用.hidden 。)

As others have said, .hide is deprecated,

(正如其他人所说， .hide已被弃用，)

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1

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

Second, use jQuery's .toggleClass() , .addClass() and .removeClass()

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

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

• To show it: $("#myId").removeClass('hidden');

  (要显示它： $("#myId").removeClass('hidden');)

• To hide it: $("#myId").addClass('hidden');

  (隐藏它： $("#myId").addClass('hidden');)

• To toggle it: $("#myId").toggleClass('hidden');

  (要切换它： $("#myId").toggleClass('hidden');)

Don't use the css class .show , it has a very small use case.

(不要使用css类.show ，它有一个非常小的用例。)

The definitions of show , hidden and invisible are in the docs .

(show ， hidden和invisible的定义在docs中 。)

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