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

其他回答

最近从2.3升级到3.1时遇到了这种情况;我们的jQuery动画(slideDown)崩溃了,因为我们在页面模板的元素上放置了隐藏。我们创建了以名字间隔的Bootstrap类版本,现在它带有丑陋的重要规则。

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

使用bootstrap .collapse而不是.hidden

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

有一个没有JQuery的解决方案

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

举个例子。

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

带有按钮的示例

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

我喜欢使用toggleClass:

var switch = true; //it can be an JSON value ...
$("#my-div").toggleClass('hide', switch);

在引导4中,你可以使用d-none类来完全隐藏一个元素。 https://getbootstrap.com/docs/4.0/utilities/display/