假设我创建了一个这样的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?
当前回答
有一个没有JQuery的解决方案
您可以使用CSS伪类:Active在单击时隐藏元素。这个伪类主要用于锚标记和按钮。
举个例子。
A:活动{显示:无;} /*活动链接*/ <a href="#">当它被点击时将会消失
带有按钮的示例
#btn-01:active ~ p { 显示:没有; ｝ <button id="btn-01"> click me</button> <p id="text">
其他回答
@ dusin -graham所概述的方法也是我所做的。请记住，bootstrap 3现在使用“hidden”而不是“hide”，因为他们的文档在getbootstrap。所以我会这样做:
$(document).ready(function() {
$('.hide').hide().removeClass('hide');
$('.hidden').hide().removeClass('hidden');
});
那么无论何时使用jQuery的show()和hide()方法，都不会有冲突。
使用bootstrap .collapse而不是.hidden
稍后在JQuery中，您可以使用.show()或.hide()来操作它
我通过编辑引导CSS文件解决了我的问题，查看他们的文档:
hide:
.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1
.hide {
display: none !important;
}
.hidden是我们现在应该使用的，但它实际上是:
.hidden {
display: none !important;
visibility: hidden !important;
}
jQuery的“淡出”将无法工作，因为“可见性”。
因此，对于最新的Bootstrap， .hide不再使用，但它仍然在min.css文件中。 所以我保留。隐藏原样，只是删除了"!重要的“从”。类(无论如何都应该被弃用)。但是你也可以在你自己的CSS中覆盖它，我只是想让我所有的应用程序都一样，所以我改变了Bootstrap CSS文件。
现在jQuery的“fadeIn()”工作。
我这样做的原因与上面的建议相比，是因为当你“removeClass('.hide')”对象立即显示出来，你跳过动画:)
我希望它能帮助到其他人。
更新:从现在开始，我使用.collapse和$('.collapse').show()。
对于Bootstrap 4 Alpha 6
对于Bootstrap 4，你必须使用.hidden-x -up。
https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes
.hidden-*-up类在视口位于给定断点或更宽位置时隐藏元素。例如，.hidden- mup隐藏中型、大型和超大视口上的元素。
还有隐藏的HTML5属性。
https://v4-alpha.getbootstrap.com/content/reboot/#html5-hidden-attribute
HTML5添加了一个名为[hidden]的新全局属性，默认情况下样式为display: none。借用PureCSS的思想，我们改进了这个默认值，使[hidden] {display: none !}来帮助防止它的显示被意外覆盖。虽然IE10本身不支持[hidden]，但CSS中的显式声明解决了这个问题。 <input type="text" hidden>
还有。invisible会影响布局。
https://v4-alpha.getbootstrap.com/utilities/invisible-content/
invisible类只能用来切换元素的可见性，这意味着它的显示不会被修改，元素仍然可以影响文档的流程。
我喜欢使用toggleClass:
var switch = true; //it can be an JSON value ...
$("#my-div").toggleClass('hide', switch);
