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

Question

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

Answer 1

正确答案

引导程序 4.x

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

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

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

（感谢方明的评论）

引导程序 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;
}

Answer 2

简单地：

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

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

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

Answer 3

使用 bootstrap .collapse 而不是 .hidden

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

Answer 4

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

hide类可用于在页面加载时隐藏内容。

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

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

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

Answer 5

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

.hideMe {
    display: none;
}

并像这样使用：

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

现在jQuery隐藏工作

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

Answer 6

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

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

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

Answer 7

像这样启动元素：

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

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

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

我相信最简单的方法。

Answer 8

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

Answer 9

我喜欢使用toggleClass：

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

Answer 10

$(function(){

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

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

})

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

Answer 11

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

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

Answer 12

如果您愿意重写您所做的事情，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 解决了这个问题时，就把它扔掉。

Answer 13

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

---

对于 Bootstrap 4 Alpha 6

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

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

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

还有hidden HTML5 属性。

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

HTML5 添加了一个名为 [hidden] 的新全局属性，默认样式为 display: none。 借鉴 PureCSS 的一个想法，我们改进了这个默认设置，使 [hidden] { display: none !important; 以帮助防止其显示被意外覆盖。 虽然 IE10 本身不支持 [hidden]，但我们 CSS 中的显式声明解决了这个问题。

<input type="text" hidden>

还有.invisible会影响布局。

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

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

Answer 14

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

Answer 15

将以下代码段用于扩展 jQuery 的 Bootstrap 4：

(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('隐藏');

   $().hideShow('show');

希望你们觉得它有帮助。 :-)

Answer 16

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

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

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

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

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

Answer 17

我通过编辑 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 AS IS 并从“.hide”类中删除了“！important”（无论如何都应该被弃用）。 但是你也可以在你自己的 CSS 中覆盖它，我只是希望我的所有应用程序都表现得一样，所以我更改了 Bootstrap CSS 文件。

现在 jQuery "fadeIn()" 可以工作了。

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

我希望它能帮助别人。

Answer 18

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

Answer 19

基于上述答案，我刚刚添加了我自己的函数，这进一步与可用的 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;
    };

Answer 20

有没有JQuery的解决方案

您可以使用 CSS Pseudo class :Active在单击时隐藏元素。 这个伪 class 主要用在锚标签和按钮上。

例如。

 a:active { display: none; } /* Active links */

 <a href="#">This will dissapear when it is clicked.</a>

带按钮的例子

 #btn-01:active ~ p { display: none; }

 <button id="btn-01"> click me</button> <p id="text">Some Example Text</p>

Answer 21

☀️ 正确答案

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

Answer 22

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的引导（V3）类.hidden也：

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

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

display: block

由于 Twitter Bootstrap 中的!important ，这种内联样式没有任何作用，所以我们需要删除.hidden类，但我不会为此推荐.removeClass ！ 因为当 jQuery 再次隐藏某些东西时，它也会添加一个内联样式：

display: none

这与 Twitter Bootstrap 的 .hidden 类不同，后者也针对 AT（屏幕阅读器）进行了优化。 所以，如果我们想显示隐藏的 div，我们需要去掉 Twitter Bootstrap 的.hidden类，所以我们去掉了重要的语句，但是如果我们再次隐藏它，我们希望将.hidden类找回来再次！ 为此，我们可以使用 [.toggleClass][3]。

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

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

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

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