假设我创建了一个这样的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?
当前回答
另一种解决这种烦恼的方法是创建自己的CSS类，在规则的末尾不设置!important，就像这样:
.hideMe {
display: none;
}
并像这样使用:
<div id="header-mask" class="hideMe"></div>
现在jQuery隐藏工作
$('#header-mask').show();
其他回答
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
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中，你可以使用d-none类来完全隐藏一个元素。 https://getbootstrap.com/docs/4.0/utilities/display/
Hide和hidden都已弃用并在之后被删除，在新版本中不再存在。你可以根据需要使用d-none/d-sm-none/invisible等类。 它们被删除的可能原因是隐藏/隐藏在CSS上下文中有点令人困惑。在CSS中，隐藏(hidden)用于可见性，而不是用于显示。 可见性和显示性是不同的东西。
如果你需要一个类用于可见性:hidden，那么你需要来自可见性实用程序的不可见类。
检查下面的可见性和显示实用程序:
https://getbootstrap.com/docs/4.1/utilities/visibility/
https://getbootstrap.com/docs/4.1/utilities/display/
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();
});
