假设我创建了一个这样的 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 显示元素的最简单方法是什么?
最佳答案
正确答案
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;
}
关于javascript - 如何使用 Twitter Bootstrap 隐藏元素并使用 jQuery 显示它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18568736/