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

正确答案

Bootstrap 4.x

Bootstrap 4.x使用新.d-none类。而不使用任何一个 .hidden，或者.hide如果您使用的是Bootstrap 4.x，请使用.d-none。

<div id="myId" class="d-none">Foobar</div>

• 要显示它： $("#myId").removeClass('d-none');
• 要隐藏它： $("#myId").addClass('d-none');
• 要切换它： $("#myId").toggleClass('d-none');

（感谢方明的评论）

Bootstrap 3.x

首先，不要使用.hide！使用.hidden。正如其他人所说，.hide已弃用，

.hide可用，但并不总是会影响屏幕阅读器，自v3.0.1起已弃用

其次，使用jQuery的.toggleClass（） ，.addClass（）和.removeClass（）

<div id="myId" class="hidden">Foobar</div>

• 要显示它： $("#myId").removeClass('hidden');
• 要隐藏它： $("#myId").addClass('hidden');
• 要切换它： $("#myId").toggleClass('hidden');

不要使用css类.show，它具有非常小的用例。的定义show，hidden并invisible在该文档。

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

只是：

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

或者，如果您以某种方式希望班级仍然存在：

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

使用bootstrap .collapse而不是.hidden

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

不建议使用此解决方案。使用票数最高的解决方案。

该hide班是有用的，以保持隐藏在页面加载内容。

我的解决方案是在初始化期间，切换到jquery的hide：

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

然后show()，hide()应正常运行。

解决这种烦恼的另一种方法是创建自己的CSS类，该类不会在规则末尾设置！important，如下所示：

.hideMe {
    display: none;
}

并像这样使用：

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

现在jQuery隐藏工程

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

@ dustin-graham概述的方法也是我的方法。还要记住，引导程序3现在按照getbootstrap中的文档使用“ hidden”而不是“ hide” 。所以我会做这样的事情：

$(document).ready(function() {
    $('.hide').hide().removeClass('hide');
    $('.hidden').hide().removeClass('hidden');
});

然后，无论何时使用jQuery show()和hide()方法，都不会发生冲突。

像这样初始化元素：

<div id='foo' style="display: none"></div>

然后，使用您想要显示的事件，如下所示：

$('#foo').show();

我相信最简单的方法。

HTML：

<div id="my-div" class="hide">Hello, TB3</div>

Javascript：

$(function(){
    //If the HIDE class exists then remove it, But first hide DIV
    if ( $("#my-div").hasClass( 'hide' ) ) $("#my-div").hide().removeClass('hide');

    //Now, you can use any of these functions to display
    $("#my-div").show();
    //$("#my-div").fadeIn();
    //$("#my-div").toggle();
});

我喜欢使用toggleClass：

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

$(function(){

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

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

})

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

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

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

如果您愿意重写已完成的工作，则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随附有针对此问题的修复程序后，将其丢弃。

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

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

对于Bootstrap 4 Alpha 6

对于Bootstrap 4，您必须使用.hidden-xs-up。

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

当视口在给定的断点或更宽时，.hidden-*-up类隐藏元素。例如，.hidden-md-up在中，大和超大视口上隐藏元素。

还有hiddenHTML5属性。

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

HTML5添加了一个名为[hidden]的新全局属性，其样式设置为显示：默认情况下为无。借用PureCSS的想法，我们通过使[hidden] {display：none！important; }，以防止其显示意外被覆盖。尽管IE10本身不支持[hidden]，但CSS中的显式声明可以解决该问题。

<input type="text" hidden>

还有.invisible一些确实会影响布局。

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

.invisible类可用于仅切换元素的可见性，这意味着它的显示不会被修改，并且元素仍然可以影响文档的流程。

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

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

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

https://getbootstrap.com/docs/4.1/utilities/visibility/

https://getbootstrap.com/docs/4.1/utilities/display/

在Bootstrap 4中使用以下代码片段，以扩展jQuery：

(function( $ ) {

    $.fn.hideShow = function( action ) {

        if ( action.toUpperCase() === "SHOW") {
            // show
            if(this.hasClass("d-none"))
            {
                this.removeClass("d-none");
            }

            this.addClass("d-block");

        }

        if ( action.toUpperCase() === "HIDE" ) {
            // hide
            if(this.hasClass("d-block"))
            {
                this.removeClass("d-block");
            }

            this.addClass("d-none");
      }

          return this;
    };

}( jQuery ));

1. 将上面的代码放在文件中。让我们假设“ myJqExt.js”

2. 在包含jQuery之后添加文件。

3. 使用语法使用它

   $（）。hideShow（'hide'）;

   $（）。hideShow（'show'）;

希望对您有所帮助。:-)

Bootstrap，JQuery，名称空间...一个简单的问题是什么：

var x = document.getElementById('my-div');
x.className.replace(/\bhide\b/, ''); //remove any hide class
x.style.display = ''; //show
x.style.display = 'none'; //hide

您可以创建一个符合KISS的小帮手功能：

function mydisplay(id, display) {
    var node = (typeof id == 'string') ? document.getElementById(id) : id;
    node.className.replace(/\bhide\b/, '');
    if (node) {
        if (typeof display == 'undefined') {
            display = (node.style.display != 'none');
        } else if (typeof display == 'string' && display == 'toggle') {
            display = mydisplay(node, !mydisplay(node));
        } else {
            node.style.display = (display) ? '' : 'none';
        }
    }
    return display;
}
is_hidden = mydisplay('my-div'); //actual state
mydisplay('my-div', false); //hide
mydisplay('my-div', true); //show
mydisplay('my-div', 'toggle'); //toggle state

根据以上答案，我刚刚添加了自己的函数，并且这与可用的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;
    };

我通过编辑Bootstrap CSS文件解决了我的问题，请参阅其文档：

。隐藏：

.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的“ fadeIn”由于“可见性”而无法使用。

因此，对于最新的Bootstrap，.hide不再使用，但仍在min.css文件中。所以我按原样离开了.hidden，只是从“ .hide”类（无论如何应该弃用了）中删除了“！important”。但是您也可以在自己的CSS中覆盖它，我只希望所有应用程序都具有相同的作用，因此我更改了Bootstrap CSS文件。

现在，jQuery“ fadeIn（）”可以使用了。

与上面的建议相比，我这样做的原因是因为当您“ removeClass（'。hide'）”时会立即显示该对象，而您跳过了动画:)

我希望它可以帮助其他人。

The️正确的答案

在Bootstrap 4中隐藏元素：

<p id="insufficient-balance-warning" class="d-none alert alert-danger">Pay me</p>

🛑然后，可以肯定地用以下命令显示它：

if (pizzaFundsAreLow) {
  $('#insufficient-balance-warning').removeClass('d-none');
}

💓但是，如果您以语义方式执行此操作，则可以将责任从Bootstrap转移到jQuery，然后可以使用其他jQuery优点，例如褪色：

if (pizzaFundsAreLow) {
  $('#insufficient-balance-warning').hide().removeClass('d-none').fadeIn();
}

Twitter Bootstrap提供了用于切换内容的类，请参阅https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less。

我对jQuery完全陌生，在阅读了他们的文档之后，我来到了另一个结合Twitter Bootstrap + jQuery的解决方案。

首先，单击另一个元素（类wsis-toggle）时“隐藏”和“显示”一个元素（类wsis-collapse）的解决方案是使用.toggle。

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle();
    });
});

您还已经.wsis-collapse通过使用Twitter Bootstrap（V3）类隐藏了该元素.hidden：

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

当您单击时.wsis-toggle，jQuery将添加一个内联样式：

display: block

由于!important在Twitter Bootstrap中，此内联样式无效，因此我们需要删除.hidden该类，但我不建议.removeClass这样做！因为当jQuery要再次隐藏某些东西时，它还会添加一个内联样式：

display: none

这与Twitter Bootstrap的.hidden类不同，后者也针对AT进行了优化（屏幕阅读器）。因此，如果我们想显示隐藏的div，则需要摆脱.hiddenTwitter Bootstrap 的类，从而摆脱重要的声明，但是如果再次隐藏它，我们希望再次拥有.hidden该类！我们可以使用[.toggleClass] [3]。

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden" );
    });
});

这样，您每次隐藏内容时都继续使用隐藏的类。

.showTB中的类实际上与jQuery的内联样式相同，都为'display: block'。但是，如果.show某个时候的类有所不同，那么您也只需添加该类：

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
    });
});