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

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

我喜欢使用toggleClass:

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

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

我通过编辑引导CSS文件解决了我的问题，查看他们的文档:

hide:

.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的“淡出”将无法工作，因为“可见性”。

因此，对于最新的Bootstrap， .hide不再使用，但它仍然在min.css文件中。 所以我保留。隐藏原样，只是删除了"!重要的“从”。类(无论如何都应该被弃用)。但是你也可以在你自己的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)类隐藏了.wsis-collapse元素。

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

当你点击.wsis-toggle时，jQuery会添加一个内联样式:

display: block

因为!在Twitter Bootstrap中很重要，这种内联样式没有效果，所以我们需要删除.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" );
    });
});