假设我创建了一个这样的 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 使用新的.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');（感谢方明的评论）
首先，不要使用.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中。hiddeninvisible
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.invisible {
visibility: hidden;
}
简单地：
$(function(){
$("#my-div").removeClass('hide');
});
或者，如果您以某种方式希望课程仍然存在：
$(function(){
$("#my-div").css('display', 'block !important');
});
使用引导程序 .collapse 而不是 .hidden
稍后在 JQuery 中，您可以使用 .show() 或 .hide() 来操作它
此解决方案已弃用。使用票数最高的解决方案。
该类hide对于在页面加载时隐藏内容很有用。
我对此的解决方案是在初始化期间，切换到 jquery 的隐藏：
$('.targets').hide().removeClass('hide');
然后show()并且hide()应该正常运行。
解决这个烦恼的另一种方法是创建自己的 CSS 类，它不会在规则末尾设置 !important，如下所示：
.hideMe {
display: none;
}
并像这样使用：
<div id="header-mask" class="hideMe"></div>
现在 jQuery 隐藏工作
$('#header-mask').show();
@dustin-graham 概述的方法也是我的做法。还要记住，根据他们在getbootstrap的文档，bootstrap 3 现在使用“隐藏”而不是“隐藏” 。所以我会做这样的事情：
$(document).ready(function() {
$('.hide').hide().removeClass('hide');
$('.hidden').hide().removeClass('hidden');
});
那么无论何时使用jQueryshow()和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);
$(function(){
$("#my-div").toggle();
$("#my-div").click(function(){$("#my-div").toggle()})
})
// 您甚至不必设置#my-div .hidenor !important，只需在事件函数中粘贴/重复切换即可。
最近从 2.3 升级到 3.1 时遇到了这个问题；我们的 jQuery 动画 ( slideDown ) 坏了，因为我们在页面模板中的元素上设置了hide 。我们创建了 Bootstrap 类的命名空间版本，这些版本现在带有丑陋的!important规则。
.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 提供了解决这个问题的方法时，把它扔掉。
更新：从现在开始，我使用.collapseand $('.collapse').show()。
对于 Bootstrap 4，您必须使用.hidden-xs-up.
https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes
.hidden-*-up 类在视口位于给定断点或更宽时隐藏元素。例如，.hidden-md-up 在中、大和超大视口上隐藏元素。
还有hiddenHTML5 属性。
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 类只能用于切换元素的可见性，这意味着它的显示不会被修改，并且元素仍然可以影响文档的流程。
在 bootstrap 4 中，您可以使用d-noneclass 完全隐藏元素。
https://getbootstrap.com/docs/4.0/utilities/display/
对扩展 jQuery 的 Bootstrap 4 使用以下代码段：
(function( $ ) {
$.fn.hideShow = function( action ) {
if ( action.toUpperCase() === "SHOW") {
// show
if(this.hasClass("d-none"))
{
this.removeClass("d-none");
}
this.addClass("d-block");
}
if ( action.toUpperCase() === "HIDE" ) {
// hide
if(this.hasClass("d-block"))
{
this.removeClass("d-block");
}
this.addClass("d-none");
}
return this;
};
}( jQuery ));
在包含 jQuery 之后包含文件。
使用它的语法
$().hideShow('隐藏');
$().hideShow('show');
希望你们觉得它有帮助。:-)
hide 和 hidden 都已弃用，后来被删除，在新版本中不再存在。您可以根据需要使用 d-none/d-sm-none/invisible 等类。它们被删除的可能原因是因为隐藏/隐藏在 CSS 上下文中有点混乱。在 CSS 中，隐藏（hidden）是用于可见性，而不是用于显示。可见性和显示是不同的东西。
如果您需要一个可见性类：隐藏，那么您需要可见性实用程序中的不可见类。
检查以下可见性和显示实用程序：
在 Bootstrap 4 中，您隐藏元素：
<p id="insufficient-balance-warning" class="d-none alert alert-danger">Pay me</p>
然后，当然，您可以从字面上显示它：
if (pizzaFundsAreLow) {
$('#insufficient-balance-warning').removeClass('d-none');
}
但是如果你以语义的方式来做，通过将责任从 Bootstrap 转移到 jQuery，那么你可以使用其他 jQuery 细节，比如淡入淡出：
if (pizzaFundsAreLow) {
$('#insufficient-balance-warning').hide().removeClass('d-none').fadeIn();
}
我通过编辑 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 原样，只是从“.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();
});
});
您已经.wsis-collapse使用 Twitter Bootstrap (V3) 类隐藏了该元素.hidden：
.hidden {
display: none !important;
visibility: hidden !important;
}
当您单击 时.wsis-toggle，jQuery 正在添加一个内联样式：
display: block
因为!important在 Twitter Bootstrap 中，这种内联样式没有效果，所以我们需要删除这个.hidden类，但我不建议.removeClass这样做！因为当 jQuery 要再次隐藏某些东西时，它也会添加一个内联样式：
display: none
这与 Twitter Bootstrap 的 .hidden 类不同，后者也针对 AT 进行了优化（屏幕阅读器）。所以，如果我们要显示隐藏的 div，就需要去掉.hiddenTwitter 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" );
});
});