如何隐藏元素使用Twitter引导和显示它使用jQuery?

假设我创建了一个这样的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中，你可以使用d-none类来完全隐藏一个元素。 https://getbootstrap.com/docs/4.0/utilities/display/

其他回答

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

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

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

有一个没有JQuery的解决方案

您可以使用CSS伪类:Active在单击时隐藏元素。这个伪类主要用于锚标记和按钮。

举个例子。

A:活动{显示:无;} /*活动链接*/ <a href="#">当它被点击时将会消失

带有按钮的示例

#btn-01:active ~ p { 显示:没有; ｝ <button id="btn-01"> click me</button> <p id="text">

以如下方式初始化元素:

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

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

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

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

简单:

$(function(){
  $("#my-div").removeClass('hide');
});

或者如果你想让这个类仍然在那里:

$(function(){
  $("#my-div").css('display', 'block !important');
});

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/

推荐文章