假设我创建了一个这样的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?
当前回答
另一种解决这种烦恼的方法是创建自己的CSS类，在规则的末尾不设置!important，就像这样:
.hideMe {
display: none;
}
并像这样使用:
<div id="header-mask" class="hideMe"></div>
现在jQuery隐藏工作
$('#header-mask').show();
其他回答
正确答案
引导4.倍
引导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.倍
首先，不要使用。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;
}
基于上面的答案，我刚刚添加了我自己的函数，这进一步不与可用的jquery函数如.hide()， .show()， .toggle()冲突。希望能有所帮助。
/*
* .hideElement()
* Hide the matched elements.
*/
$.fn.hideElement = function(){
$(this).addClass('hidden');
return this;
};
/*
* .showElement()
* Show the matched elements.
*/
$.fn.showElement = function(){
$(this).removeClass('hidden');
return this;
};
/*
* .toggleElement()
* Toggle the matched elements.
*/
$.fn.toggleElement = function(){
$(this).toggleClass('hidden');
return this;
};
$(function(){
$("#my-div").toggle();
$("#my-div").click(function(){$("#my-div").toggle()})
})
//你甚至不需要设置#my-div .hide或!重要的是，只需粘贴/重复事件函数中的切换。
以如下方式初始化元素:
<div id='foo' style="display: none"></div>
然后，使用你想要显示它的事件，如下所示:
$('#foo').show();
我相信这是最简单的方法。
Hide和hidden都已弃用并在之后被删除，在新版本中不再存在。你可以根据需要使用d-none/d-sm-none/invisible等类。 它们被删除的可能原因是隐藏/隐藏在CSS上下文中有点令人困惑。在CSS中，隐藏(hidden)用于可见性，而不是用于显示。 可见性和显示性是不同的东西。
如果你需要一个类用于可见性:hidden，那么你需要来自可见性实用程序的不可见类。
检查下面的可见性和显示实用程序:
https://getbootstrap.com/docs/4.1/utilities/visibility/
https://getbootstrap.com/docs/4.1/utilities/display/
