假设我创建了一个这样的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?
当前回答
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 {
display: none !important;
visibility: hidden !important;
}
当你点击.wsis-toggle时，jQuery会添加一个内联样式:
display: block
因为!在Twitter Bootstrap中很重要，这种内联样式没有效果，所以我们需要删除.hidden类，但我不建议为此使用.removeClass !因为当jQuery要再次隐藏一些东西时，它也添加了一个内联样式:
display: none
这与Twitter Bootstrap的.hidden类不同，后者也针对AT(屏幕阅读器)进行了优化。所以，如果我们想要显示隐藏的div，我们需要去掉Twitter Bootstrap的.hidden类，这样我们就去掉了重要的语句，但如果我们再次隐藏它，我们想要再次拥有.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" );
});
});
其他回答
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 {
display: none !important;
visibility: hidden !important;
}
当你点击.wsis-toggle时，jQuery会添加一个内联样式:
display: block
因为!在Twitter Bootstrap中很重要，这种内联样式没有效果，所以我们需要删除.hidden类，但我不建议为此使用.removeClass !因为当jQuery要再次隐藏一些东西时，它也添加了一个内联样式:
display: none
这与Twitter Bootstrap的.hidden类不同，后者也针对AT(屏幕阅读器)进行了优化。所以，如果我们想要显示隐藏的div，我们需要去掉Twitter Bootstrap的.hidden类，这样我们就去掉了重要的语句，但如果我们再次隐藏它，我们想要再次拥有.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" );
});
});
正确答案
引导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;
}
以如下方式初始化元素:
<div id='foo' style="display: none"></div>
然后，使用你想要显示它的事件，如下所示:
$('#foo').show();
我相信这是最简单的方法。
基于上面的答案，我刚刚添加了我自己的函数，这进一步不与可用的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;
};
更新:从现在开始，我使用.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类只能用来切换元素的可见性，这意味着它的显示不会被修改，元素仍然可以影响文档的流程。
