如何使用Twitter Bootstrap隐藏元素并使用jQuery显示元素？

西门猴子2020-03-26

假设我创建了这样的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显示元素的最简单方法是什么？

Itachi2020/03/26 16:25:35

在bootstrap 4中，您可以使用d-noneclass完全隐藏元素。 https://getbootstrap.com/docs/4.0/utilities/display/

Stafan2020/03/26 16:25:35

hide和hidden均已弃用，以后又被删除，新版本中不再存在。您可以根据需要使用d-none / d-sm-none / invisible等类。删除它们的可能原因是因为CSS上下文中的隐藏/隐藏有些混乱。在CSS中，隐藏（隐藏）用于可见性，而不是用于显示。可见性和显示是不同的东西。

如果您需要一个可见性类：隐藏，那么您需要可见性实用程序中的不可见类。

检查以下可见性和显示实用程序：

飞云2020/03/26 16:25:35

$(function(){

$("#my-div").toggle();

$("#my-div").click(function(){$("#my-div").toggle()})

})

//您甚至不必设置#my-div .hidenor !important，只需在事件函数中粘贴/重复该切换即可。

伽罗2020/03/26 16:25:35

从2.3升级到3.1时最近遇到了这种情况；我们的jQuery动画（slideDown）坏了，因为我们在页面模板中的元素上隐藏了。我们采用了创建带有空格的！important规则的Bootstrap类的命名空间版本的方法。

.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...

TomJinJin2020/03/26 16:25:35

使用bootstrap .collapse而不是.hidden

稍后在JQuery中，您可以使用.show（）或.hide（）对其进行操作

Newest Answer