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


当前回答

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

.hideMe {
    display: none;
}

并像这样使用:

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

现在jQuery隐藏工作

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

其他回答

更新:从现在开始,我使用.collapse和$('.collapse').show()。


对于Bootstrap 4 Alpha 6

对于Bootstrap 4,你必须使用.hidden-x -up。

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes

.hidden-*-up类在视口位于给定断点或更宽位置时隐藏元素。例如,.hidden- mup隐藏中型、大型和超大视口上的元素。

还有隐藏的HTML5属性。

https://v4-alpha.getbootstrap.com/content/reboot/#html5-hidden-attribute

HTML5添加了一个名为[hidden]的新全局属性,默认情况下样式为display: none。借用PureCSS的思想,我们改进了这个默认值,使[hidden] {display: none !}来帮助防止它的显示被意外覆盖。虽然IE10本身不支持[hidden],但CSS中的显式声明解决了这个问题。 <input type="text" hidden>

还有。invisible会影响布局。

https://v4-alpha.getbootstrap.com/utilities/invisible-content/

invisible类只能用来切换元素的可见性,这意味着它的显示不会被修改,元素仍然可以影响文档的流程。

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为这个问题提供修复时,将其扔掉。

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

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

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

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

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

$(function(){

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

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

})

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

基于上面的答案,我刚刚添加了我自己的函数,这进一步不与可用的jquery函数如.hide(), .show(), .toggle()冲突。希望能有所帮助。

    /*
     * .hideElement()
     * Hide the matched elements. 
     */
    $.fn.hideElement = function(){
        $(this).addClass('hidden');
        return this;
    };

    /*
     * .showElement()
     * Show the matched elements.
     */
    $.fn.showElement = function(){
        $(this).removeClass('hidden');
        return this;
    };

    /*
     * .toggleElement()
     * Toggle the matched elements.
     */
    $.fn.toggleElement = function(){
        $(this).toggleClass('hidden');
        return this;
    };