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


当前回答

此解决方案不建议使用。使用投票最多的解决方案。

hide类对于在页面加载时隐藏内容非常有用。

我的解决方案是在初始化期间,切换到jquery的隐藏:

$('.targets').hide().removeClass('hide');

然后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/

以如下方式初始化元素:

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

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

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

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

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

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" );
    });
});

使用bootstrap .collapse而不是.hidden

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