如何使用twitter bootstrap 3隐藏元素并使用jQuery显示它？
使用 Twitter Bootstrap 3和jQuery 2.0.3
HTML：
<div id="my-div" class="hide">Hello, TB3</div> 使用Javascript：
$(function(){ $("#my-div").show(); });
结果：
看不见我的div
<div id="my-div" class="hide" style="display: block;">Hello, TB3</div>
原因：
.hide { display: none !important; }
bootstrap.min.js，第9行
题：
使用Bootstrap3隐藏元素并使用jQuery显示它的最简单方法是什么？
正确的答案
首先，不要使用.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; }
只是：
$(function(){ $("#my-div").removeClass('hide'); });
或者如果你想让这个class还在那里：
$(function(){ $("#my-div").css('display', 'block !important'); });
hide类有助于在页面加载时隐藏内容。
我的解决scheme是在初始化期间，切换到jQuery的隐藏：
$('.targets').hide().removeClass('hide');
然后show()和hide()应该正常工作。
解决这个问题的另一种方法是创build自己的CSS类，它不在规则的末尾设置！important，如下所示：
.hideMe { display: none; }
并像这样使用：
<div id="header-mask" class="hideMe"></div>
现在jQuery隐藏工程
$('#header-mask').show();
使用引导.collapse而不是.hidden
后来在JQuery中，您可以使用.show（）或.hide（）来操作它
@ dustin-graham概述的方法也是我如何做的。 请记住bootstrap 3现在使用“hidden”而不是“hide”作为getbootstrap的文档。 所以我会做这样的事情：
$(document).ready(function() { $('.hide').hide().removeClass('hide'); $('.hidden').hide().removeClass('hidden'); });
然后，每当使用jQuery的show()和hide()方法，就不会有冲突。
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(); });
启动这样的元素：
<div id='foo' style="display: none"></div>
然后，使用您想要显示的事件，例如：
$('#foo').show();
我相信最简单的方法。
我喜欢使用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 .hide和!important ，只需粘贴/重复事件函数中的切换即可。
最近碰到这个时从2.3升级到3.1; 我们的jQueryanimation（ slideDown ）打破了，因为我们把隐藏在页面模板中的元素。 我们走了创buildBootstrap类的命名空间版本的路线，这些版本现在带有丑陋的重要规则。
.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);
我通过编辑引导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 is，只是从“.hide”类中删除了“！important”（不pipe怎么说都被弃用了）。 但是你也可以在你自己的CSS中覆盖它，我只是希望我的所有应用程序行为相同，所以我改变了Bootstrap CSS文件。
而现在jQuery“fadeIn（）”的作品。
我之所以这样做，是因为当你“removeClass（'。hide'）”立即显示的对象，你跳过了animation:)
希望它帮助别人。
引导，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
您可以创build一个辅助function，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; };
对于Bootstrap 4 Alpha 6
对于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借用一个想法，我们通过使[隐藏] {display：none！important; }以帮助防止其显示被意外覆盖。 虽然[hidden]并不是IE10本地支持的，但我们CSS中的显式声明解决了这个问题。
<input type="text" hidden>
也有不.invisible影响布局。
https://v4-alpha.getbootstrap.com/utilities/invisible-content/
.invisible类只能用于切换元素的可见性，这意味着它的显示不会被修改，元素仍然会影响文档的stream向。
隐藏和隐藏都被弃用，并不再存在于新版本中。 您可以使用d-none类来查看display：none。
Twitter Bootstrap提供切换内容的类，请参阅https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less 。
我完全不熟悉jQuery，在阅读文档后，我来到其他解决scheme来结合Twitter Bootstrap + jQuery。
首先，当点击其他元素（类wsis-toggle）时，“隐藏”和“显示”元素（类wsis-collapse）的解决scheme是使用.toggle 。
jQuery(document).ready(function() { jQuery(".wsis-toggle").click(function(){ jQuery(".wsis-collapse").toggle(); }); });
您已经使用Twitter Bootstrap（V3）类隐藏了元素.wsis-collapse 。也隐藏了：
.hidden { display: none !important; visibility: hidden !important; }
当你点击.wsis-toggle ，jQuery添加一个内联样式：
display: block
由于Twitter Bootstrap中的!important ，这种内联风格没有任何作用，所以我们需要删除.hidden类，但是我不会推荐.removeClass ！ 因为当jQuery要再次隐藏某些东西的时候，它也会添加一个内联样式：
display: none
这与Twitter Bootstrap的.hidden类不同，它也针对AT（屏幕阅读器）进行了优化。 所以，如果我们想要显示隐藏的div，我们需要摆脱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" ); }); });
