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


当前回答

Razz的答案很好,如果你愿意重写你所做的。

遇到了同样的麻烦,用以下方法解决了这个问题:

/** * The problem: https://github.com/twbs/bootstrap/issues/9881 * * This script enhances jQuery's methods: show and hide dynamically. * If the element was hidden by bootstrap's css class 'hide', remove it first. * Do similar in overriding the method 'hide'. */ !function($) { "use strict"; var oldShowHide = {'show': $.fn.show, 'hide': $.fn.hide}; $.fn.extend({ show: function() { this.each(function(index) { var $element = $(this); if ($element.hasClass('hide')) { $element.removeClass('hide'); } }); return oldShowHide.show.call(this); }, hide: function() { this.each(function(index) { var $element = $(this); if ($element.hasClass('show')) { $element.removeClass('show'); } }); return oldShowHide.hide.call(this); } }); }(window.jQuery);

当Bootstrap为这个问题提供修复时,将其扔掉。

其他回答

$(function(){

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

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

})

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

我喜欢使用toggleClass:

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

简单:

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

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

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

使用bootstrap .collapse而不是.hidden

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

我通过编辑引导CSS文件解决了我的问题,查看他们的文档:

hide:

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1

.hide {
  display: none !important;
}

.hidden是我们现在应该使用的,但它实际上是:

.hidden {
  display: none !important;
  visibility: hidden !important;
}

jQuery的“淡出”将无法工作,因为“可见性”。

因此,对于最新的Bootstrap, .hide不再使用,但它仍然在min.css文件中。 所以我保留。隐藏原样,只是删除了"!重要的“从”。类(无论如何都应该被弃用)。但是你也可以在你自己的CSS中覆盖它,我只是想让我所有的应用程序都一样,所以我改变了Bootstrap CSS文件。

现在jQuery的“fadeIn()”工作。

我这样做的原因与上面的建议相比,是因为当你“removeClass('.hide')”对象立即显示出来,你跳过动画:)

我希望它能帮助到其他人。