質問

例えば、このような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を使って表示する最も簡単な方法は何ですか？

どのように解決するのですか？

正しい答え

ブートストラップ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より非推奨となりました。

2つ目は、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;
}