假设我创建了一个这样的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?
当前回答
$(function(){
$("#my-div").toggle();
$("#my-div").click(function(){$("#my-div").toggle()})
})
//你甚至不需要设置#my-div .hide或!重要的是，只需粘贴/重复事件函数中的切换。
其他回答
简单:
$(function(){
$("#my-div").removeClass('hide');
});
或者如果你想让这个类仍然在那里:
$(function(){
$("#my-div").css('display', 'block !important');
});
正确答案
引导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;
}
有一个没有JQuery的解决方案
您可以使用CSS伪类:Active在单击时隐藏元素。这个伪类主要用于锚标记和按钮。
举个例子。
A:活动{显示:无;} /*活动链接*/ <a href="#">当它被点击时将会消失
带有按钮的示例
#btn-01:active ~ p { 显示:没有; ｝ <button id="btn-01"> click me</button> <p id="text">
@ dusin -graham所概述的方法也是我所做的。请记住，bootstrap 3现在使用“hidden”而不是“hide”，因为他们的文档在getbootstrap。所以我会这样做:
$(document).ready(function() {
$('.hide').hide().removeClass('hide');
$('.hidden').hide().removeClass('hidden');
});
那么无论何时使用jQuery的show()和hide()方法，都不会有冲突。
我通过编辑引导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')”对象立即显示出来，你跳过动画:)
我希望它能帮助到其他人。
