假设我创建了一个这样的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 .collapse而不是.hidden
稍后在JQuery中，您可以使用.show()或.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
简单:
$(function(){
$("#my-div").removeClass('hide');
});
或者如果你想让这个类仍然在那里:
$(function(){
$("#my-div").css('display', 'block !important');
});
@ dusin -graham所概述的方法也是我所做的。请记住，bootstrap 3现在使用“hidden”而不是“hide”，因为他们的文档在getbootstrap。所以我会这样做:
$(document).ready(function() {
$('.hide').hide().removeClass('hide');
$('.hidden').hide().removeClass('hidden');
});
那么无论何时使用jQuery的show()和hide()方法，都不会有冲突。
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/
我通过编辑引导CSS文件解决了我的问题，查看他们的文档:
hide:
.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的“淡出”将无法工作，因为“可见性”。
因此，对于最新的Bootstrap， .hide不再使用，但它仍然在min.css文件中。 所以我保留。隐藏原样，只是删除了"!重要的“从”。类(无论如何都应该被弃用)。但是你也可以在你自己的CSS中覆盖它，我只是想让我所有的应用程序都一样，所以我改变了Bootstrap CSS文件。
现在jQuery的“fadeIn()”工作。
我这样做的原因与上面的建议相比，是因为当你“removeClass('.hide')”对象立即显示出来，你跳过动画:)
我希望它能帮助到其他人。
