如何隐藏元素使用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?

当前回答

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

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

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

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

然后show()和hide()应该正常工作。

其他回答

另一种解决这种烦恼的方法是创建自己的CSS类，在规则的末尾不设置!important，就像这样:

.hideMe {
    display: none;
}

并像这样使用:

<div id="header-mask" class="hideMe"></div>

现在jQuery隐藏工作

$('#header-mask').show();

使用bootstrap .collapse而不是.hidden

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

$(function(){

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

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

})

//你甚至不需要设置#my-div .hide或!重要的是，只需粘贴/重复事件函数中的切换。

在引导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...

推荐文章