假设我创建了一个这样的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 uses the new .d-none class。如果你使用Bootstrap 4.x而不是使用.hidden或.hide，请使用.d-none。
<div id="myId" class="d-none">Foobar</div>
$("#myId").removeClass('d-none');$("#myId").addClass('d-none');$("#myId").toggleClass('d-none');（感谢方明的评论）
首先，不要使用.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的定义在docs中。
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.invisible {
visibility: hidden;
}
$(function(){
$("#my-div").toggle();
$("#my-div").click(function(){$("#my-div").toggle()})
})
//你甚至不需要设置#my-div .hide和!important，只需在事件函数中粘贴/重复切换。
最近从2.3升级到3.1时遇到了这种情况;我们的jQuery动画（slideDown）破了，因为我们把隐藏在页面模板中的元素上。我们开始创建名称间隔版本的Bootstrap类，现在它们带有丑陋的重要规则。
.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...
如果你愿意重写你所做的事情，Razz的答案是好的。
遇到了同样的麻烦，并通过以下方式解决了这个问题：
/**
* The problem: https://github.com/twbs/bootstrap/issues/9881
*
* This script enhances jQuery's methods: show and hide dynamically.
* If the element was hidden by bootstrap's css class 'hide', remove it first.
* Do similar in overriding the method 'hide'.
*/
!function($) {
"use strict";
var oldShowHide = {'show': $.fn.show, 'hide': $.fn.hide};
$.fn.extend({
show: function() {
this.each(function(index) {
var $element = $(this);
if ($element.hasClass('hide')) {
$element.removeClass('hide');
}
});
return oldShowHide.show.call(this);
},
hide: function() {
this.each(function(index) {
var $element = $(this);
if ($element.hasClass('show')) {
$element.removeClass('show');
}
});
return oldShowHide.hide.call(this);
}
});
}(window.jQuery);当Bootstrap附带修复此问题时，请将其丢弃。
在bootstrap 4中，您可以使用d-none类完全隐藏元素。 https://getbootstrap.com/docs/4.0/utilities/display/
对于Bootstrap 4，您必须使用.hidden-xs-up。
https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes
当视口位于给定断点处或更宽时，.hidden - * - up类会隐藏元素。例如，.hidden-md-up会在中型，大型和超大型视口上隐藏元素。
还有hidden HTML5属性。
https://v4-alpha.getbootstrap.com/content/reboot/#html5-hidden-attribute
HTML5添加了一个名为[hidden]的新全局属性，默认情况下为display：none。借用PureCSS中的一个想法，我们通过使[hidden] {display：none！important; }以帮助防止其显示被意外覆盖。虽然IE10本身不支持[hidden]，但CSS中的显式声明可以解决这个问题。
<input type="text" hidden>
还有.invisible确实会影响布局。
https://v4-alpha.getbootstrap.com/utilities/invisible-content/
.invisible类可用于仅切换元素的可见性，这意味着它的显示不会被修改，并且元素仍然可以影响文档的流。
隐藏和隐藏都已弃用，后来被删除，新版本中不再存在。您可以根据需要使用d-none / d-sm-none / invisible等类。删除它们的可能原因是因为隐藏/隐藏在CSS上下文中有点混乱。在CSS中，隐藏（隐藏）用于可见性，而不是用于显示。能见度和显示是不同的事情。
如果您需要一个可见性类：隐藏，那么您需要来自可见性实用程序的隐藏类。
检查可见性和显示实用程序：
我通过编辑Bootstrap CSS文件解决了我的问题，请参阅他们的文档：
。隐藏：
.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“fadeIn”将无法工作。
因此，对于最新的Bootstrap，.hide不再使用，但它仍然在min.css文件中。所以我离开了.hidden AS并且刚从“.hide”类中删除了“！important”（无论如何这都被认为是弃用的）。但你也可以在你自己的CSS中覆盖它，我只是希望我的所有应用程序都一样，所以我改变了Bootstrap CSS文件。
现在jQuery“fadeIn（）”有效。
我之所以这样做的原因与上面的建议相比，是因为当你“removeClass（'。hide'）”对象立即显示，你跳过动画:)
希望它能帮到别人。
Bootstrap，JQuery，命名空间......简单有什么问题：
var x = document.getElementById('my-div');
x.className.replace(/\bhide\b/, ''); //remove any hide class
x.style.display = ''; //show
x.style.display = 'none'; //hide
您可以创建一个小帮手功能，符合KISS：
function mydisplay(id, display) {
var node = (typeof id == 'string') ? document.getElementById(id) : id;
node.className.replace(/\bhide\b/, '');
if (node) {
if (typeof display == 'undefined') {
display = (node.style.display != 'none');
} else if (typeof display == 'string' && display == 'toggle') {
display = mydisplay(node, !mydisplay(node));
} else {
node.style.display = (display) ? '' : 'none';
}
}
return display;
}
is_hidden = mydisplay('my-div'); //actual state
mydisplay('my-div', false); //hide
mydisplay('my-div', true); //show
mydisplay('my-div', 'toggle'); //toggle state
基于上面的答案，我刚刚添加了自己的函数，这进一步与可用的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;
};
Twitter Bootstrap提供切换内容的类，请参阅https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less。
我是jQuery的新手，在阅读了文档后，我来到其他解决方案，结合Twitter Bootstrap + jQuery。
首先，单击其他元素（类wsis-toggle）时“隐藏”和“显示”元素（类wsis-collapse）的解决方案是使用.toggle。
jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle();
});
});
您已经使用Twitter Bootstrap（V3）类.wsis-collapse隐藏了元素.hidden：
.hidden {
display: none !important;
visibility: hidden !important;
}
当你点击.wsis-toggle时，jQuery会添加一个内联样式：
display: block
由于Twitter Bootstrap中的!important，这种内联样式没有效果，所以我们需要删除.hidden类，但我不会为此推荐.removeClass！因为当jQuery再次隐藏某些内容时，它还会添加内联样式：
display: none
这与.hidden类的Twitter Bootstrap不同，后者也针对AT进行了优化（屏幕阅读器）。因此，如果我们想要显示隐藏的div，我们需要摆脱.hidden类的Twitter Bootstrap，所以我们摆脱了重要的声明，但如果我们再次隐藏它，我们希望再次回到.hidden类！我们可以使用[.toggleClass] [3]。
jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle().toggleClass( "hidden" );
});
});
这样，每次隐藏内容时都会继续使用隐藏类。
TB中的.show类实际上与jQuery的内联样式相同，都是'display: block'。但是如果.show类在某些时候会有所不同，那么你也可以简单地添加这个类：
jQuery(document).ready(function() {
jQuery(".wsis-toggle").click(function(){
jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
});
});
只是：
$(function(){
$("#my-div").removeClass('hide');
});
或者，如果你想以某种方式仍然在那里：
$(function(){
$("#my-div").css('display', 'block !important');
});
hide类可用于在页面加载时隐藏内容。
我的解决方案是在初始化期间，切换到jquery的隐藏：
$('.targets').hide().removeClass('hide');
然后show()和hide()应该正常运作。
使用bootstrap .collapse而不是.hidden
稍后在JQuery中，您可以使用.show（）或.hide（）来操作它
解决这个烦恼的另一种方法是创建自己的CSS类，它不会在规则的末尾设置！important，如下所示：
.hideMe {
display: none;
}
并使用如下：
<div id="header-mask" class="hideMe"></div>
现在jQuery隐藏起作用
$('#header-mask').show();
@ dustin-graham的方法概述了我是如何做到的。还要记住，bootstrap 3现在根据getbootstrap的文档使用“隐藏”而不是“隐藏”。所以我会做这样的事情：
$(document).ready(function() {
$('.hide').hide().removeClass('hide');
$('.hidden').hide().removeClass('hidden');
});
然后每当使用jQuery show()和hide()方法时，都不会发生冲突。
用这样的方式启动元素：
<div id='foo' style="display: none"></div>
然后，使用您想要显示的事件，如下所示：
$('#foo').show();
我相信最简单的方法。
HTML：
<div id="my-div" class="hide">Hello, TB3</div>
使用Javascript：
$(function(){
//If the HIDE class exists then remove it, But first hide DIV
if ( $("#my-div").hasClass( 'hide' ) ) $("#my-div").hide().removeClass('hide');
//Now, you can use any of these functions to display
$("#my-div").show();
//$("#my-div").fadeIn();
//$("#my-div").toggle();
});
我喜欢使用toggleClass：
var switch = true; //it can be an JSON value ...
$("#my-div").toggleClass('hide', switch);