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

正确答案

引导程序 4.x

Bootstrap 4.x uses the new .d-none class。 如果您使用的是 Bootstrap 4.x，请使用 .d-none，而不是使用 .hidden 或 .hide。

<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 的定义在 docs 中。

// 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');
});

---

使用引导程序 .collapse 而不是 .hidden

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

---

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

hide 类有助于在页面加载时隐藏内容。

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

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

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

---

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

.hideMe {
    display: none;
}

并像这样使用：

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

现在 jQuery 隐藏工作

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

---

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

$(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 .hide 或 !important，只需在事件函数中粘贴/重复切换即可。

---

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

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

---

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

遇到了同样的麻烦，并通过以下方式解决了问题：

/** * 问题：https://github.com/twbs/bootstrap/issues/9881 * * 此脚本增强了 jQuery 的方法：动态显示和隐藏。 * 如果元素被引导程序的 css 类“隐藏”隐藏，请先将其删除。 * 在覆盖方法“隐藏”时做类似的事情。 */ !function($) { "使用严格"; 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); } }); }(窗口.jQuery);

当 Bootstrap 提供了解决这个问题的方法时，把它扔掉。

---

在引导程序 4 中，您可以使用 d-none 类完全隐藏元素。 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/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 中的显式声明解决了这个问题。 <输入类型=“文本”隐藏>

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

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

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

---

对扩展 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 ));

将上面的代码放在一个文件中。让我们假设“myJqExt.js”在包含 jQuery 之后包含该文件。使用语法 $().hideShow('hide'); $().hideShow('show');

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

---

☀️ 正确答案

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

---

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/

---

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

---

有没有JQuery的解决方案

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

比如说。

一：活动{显示：无； } /* 活动链接 */ 点击后会消失。

按钮示例

#btn-01:active ~ p { 显示：无； } 点击我

一些示例文本

---

我通过编辑 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')”时立即显示该对象，并且您跳过动画:)

我希望它对其他人有所帮助。

---

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

您已经使用 Twitter Bootstrap (V3) 类 .hidden 隐藏了元素 .wsis-collapse：

.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" );
    });
});

---