假设我创建了一个这样的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?


当前回答

正确答案

引导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;
}

其他回答

更新:从现在开始,我使用.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类只能用来切换元素的可见性,这意味着它的显示不会被修改,元素仍然可以影响文档的流程。

我通过编辑引导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')”对象立即显示出来,你跳过动画:)

我希望它能帮助到其他人。

@ dusin -graham所概述的方法也是我所做的。请记住,bootstrap 3现在使用“hidden”而不是“hide”,因为他们的文档在getbootstrap。所以我会这样做:

$(document).ready(function() {
    $('.hide').hide().removeClass('hide');
    $('.hidden').hide().removeClass('hidden');
});

那么无论何时使用jQuery的show()和hide()方法,都不会有冲突。

以如下方式初始化元素:

<div id='foo' style="display: none"></div>

然后,使用你想要显示它的事件,如下所示:

$('#foo').show();

我相信这是最简单的方法。

使用bootstrap .collapse而不是.hidden

稍后在JQuery中,您可以使用.show()或.hide()来操作它