如何使用 Twitter Bootstrap 隐藏元素并使用 jQuery 显示它？

How to hide element using Twitter Bootstrap and show it using jQuery?

提问by psylosss

Let's say I create an HTML element like this,

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

How could I show and hide that HTML element from jQuery/Javascript.

我如何从 jQuery/Javascript 显示和隐藏该 HTML 元素。

JavaScript:

JavaScript：

$(function(){
  $("#my-div").show();
});

Result:(with any of these).

结果：（使用其中任何一个）。

I would like the elements above to be hidden.

我想隐藏上面的元素。

What is simplest way to hide element using Bootstrap and show it using jQuery?

使用 Bootstrap 隐藏元素并使用 jQuery 显示它的最简单方法是什么？

回答by Evan Carroll

The right answer

正确答案

Bootstrap 4.x

引导程序 4.x

Bootstrap 4.x uses the new .d-noneclass. Instead of using either.hidden, or .hideif you're using Bootstrap 4.x use .d-none.

Bootstrap 4.x 使用新.d-none类。而不是使用的两种.hidden，或者.hide如果你使用引导4.x的使用.d-none。

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

• To show it: $("#myId").removeClass('d-none');
• To hide it: $("#myId").addClass('d-none');
• To toggle it: $("#myId").toggleClass('d-none');

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

(thanks to the comment by Fangming)

（感谢方明的评论）

Bootstrap 3.x

引导程序 3.x

First, don't use .hide! Use .hidden.As others have said, .hideis deprecated,

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

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

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

Second, use jQuery's .toggleClass(), .addClass()and .removeClass()

其次，使用 jQuery 的.toggleClass()、.addClass()和.removeClass()

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

• To show it: $("#myId").removeClass('hidden');
• To hide it: $("#myId").addClass('hidden');
• To toggle it: $("#myId").toggleClass('hidden');

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

Don't use the css class .show, it has a very small use case. The definitions of show, hiddenand invisibleare in the docs.

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

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

回答by Razz

Simply:

简单地：

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

Or if you somehow want the class to still be there:

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

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

回答by Iván

Use bootstrap .collapse instead of .hidden

使用 bootstrap .collapse 而不是 .hidden

Later in JQuery you can use .show() or .hide() to manipulate it

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

回答by Dustin Graham

This solution is deprecated. Use the top voted solution.

此解决方案已弃用。使用最高投票的解决方案。

The hideclass is useful to keep the content hidden on page load.

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

My solution to this is during initialization, switch to jquery's hide:

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

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

Then show()and hide()should function as normal.

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

回答by dbrin

Another way to address this annoyance is to create your own CSS class that does not set the !important at the end of rule, like this:

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

.hideMe {
    display: none;
}

and used like so :

并像这样使用：

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

and now jQuery hiding works

现在jQuery隐藏工作

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

回答by MichaelJTaylor

The method @dustin-graham outlined is how I do it too. Remember also that bootstrap 3 now uses "hidden" instead of "hide" as per their documentation at getbootstrap. So I would do something like this:

@dustin-graham 概述的方法也是我的方法。还请记住，根据getbootstrap 上的文档，bootstrap 3 现在使用“隐藏”而不是“隐藏” 。所以我会做这样的事情：

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

Then whenever using the jQuery show()and hide()methods, there will be no conflict.

那么无论何时使用 jQueryshow()和hide()方法，都不会有冲突。

回答by Théo T. Carranza

Initiate the element with as such:

像这样启动元素：

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

And then, use the event you want to show it, as such:

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

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

The simplest way to go I believe.

我相信最简单的方法。

回答by Andres Separ

HTML:

HTML：

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

Javascript:

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();
});

回答by badboy

Razz's answer is good if you're willing to rewrite what you have done.

如果您愿意重写您所做的事情，Razz 的回答很好。

Was in the same trouble and worked it out with the following:

遇到了同样的麻烦，并使用以下方法解决了这个问题：

/**
 * 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);

Throw it away when Bootstrap comes with a fix for this problem.

当 Bootstrap 解决了这个问题时，就把它扔掉。

回答by HymansonT

Recently ran into this when upgrading from 2.3 to 3.1; our jQuery animations (slideDown) broke because we were putting hideon the elements in the page template. We went the route of creating name-spaced versions of Bootstrap classes that now carry the ugly !importantrule.

最近在从 2.3 升级到 3.1 时遇到了这个问题；我们的 jQuery 动画 ( slideDown) 中断了，因为我们在页面模板中的元素上放置了hide。我们创建了 Bootstrap 类的命名空间版本，这些版本现在带有丑陋的!important规则。

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