Просто:

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

Или если вы каким-то образом захотите, чтобы класс все еще был там:

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

Другим способом устранения этой досады является создание собственного CSS-класса, который не устанавливает значение! важно в конце правила, например:

.hideMe {
    display: none;
}

и используется так:

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

и теперь jQuery скрывает работы

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

Класс hide полезен для сохранения содержимого при загрузке страницы.

Мое решение для этого во время инициализации переключится на jquery hide:

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

Тогда show() и hide() должны функционировать как обычно.

Использовать bootstrap.collapse вместо .hidden

Позже в JQuery вы можете использовать .show() или .hide() для управления им.

Метод @dustin-graham описан как я тоже это делаю. Помните также, что bootstrap 3 теперь использует "скрытый" вместо "скрыть" согласно своей документации на getbootstrap. Поэтому я бы сделал что-то вроде этого:

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

Ответ на Razz хорош, если вы хотите переписать то, что вы сделали.

Был в той же самой проблеме и работал со следующим:

/**
 * The problem: https://github.com/twbs/bootstrap/issues/9881
 * 
 * This script enhances jQuery methods: show and hide dynamically.
 * If the element was hidden by bootstrap 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 приходит с исправлением этой проблемы.

Недавно натолкнулся на это при обновлении с 2,3 до 3,1; наши анимации jQuery (slideDown) сломались, потому что мы помещали скрывать элементы в шаблоне страницы. Мы пошли по пути создания имен классов Bootstrap с именами, которые теперь несут уродливое важное правило.

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

$(function(){

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

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

})

//вам даже не нужно устанавливать #my-div .hide и !important, просто вставьте/повторите переключение в функции события.

Мне нравится использовать toggleClass:

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

Для 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 добавлен новый глобальный атрибут с именем [скрытый], который выглядит как отображение: по умолчанию нет. Заимствуя идею PureCSS, мы улучшаем это значение по умолчанию, создавая [hidden] {display: none! Important; }, чтобы предотвратить его случайное переопределение. Хотя [скрытый] не поддерживается IE10, явное объявление в нашем CSS оборачивается этой проблемой.

<input type="text" hidden>

Существует также .invisible, который влияет на макет.

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

. Неизменяемый класс может использоваться для переключения только видимости элемента, то есть его отображение не изменяется, и элемент все равно может влиять на поток документа.

скрывать и скрывать обе устарели и больше не существуют в новых версиях. Вы можете использовать класс d-none для просмотра: none.

Основываясь на приведенных выше ответах, я только что добавил свои собственные функции, и это еще не противоречит доступным функциям 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, 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

Я решил проблему, отредактировав файл Bootstrap 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 "fadeIn" не будет работать из-за "видимости".

Итак, для последнего Bootstrap.hide больше не используется, но он все еще находится в файле min.css. поэтому я ушел .hidden AS IS и просто удалил "! important" из класса ".hide" (который, как предполагается, будет устаревшим в любом случае). но вы также можете просто переопределить его в своем собственном CSS, я просто хотел, чтобы все мое приложение работало одинаково, поэтому я изменил файл Bootstrap CSS.

И теперь работает jQuery "fadeIn()".

Причина, по которой я сделал это, в сравнении с предложениями выше, заключается в том, что когда вы "removeClass (" Скрыть "), объект сразу отображается, и вы пропускаете анимацию:)

Надеюсь, это помогло другим.

Twitter Bootstrap предоставляет классы для переключения содержимого, см. https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less.

Я полностью новичок в jQuery, и после прочтения там документов я пришел к другому решению для объединения Twitter Bootstrap + jQuery.

Во-первых, решение "скрыть" и "показать" элемент (класс wsis-collapse) при нажатии на другой элемент (класс wsis-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 в Bootstrap Twitter этот встроенный стиль не действует, поэтому нам нужно удалить класс .hidden, но я не буду рекомендовать .removeClass для этого! Потому что, когда jQuery собирается что-то скрывать, он также добавляет встроенный стиль:

display: none

Это не то же самое, что и .hidden класс Twitter Bootstrap, который также оптимизирован для AT (программы чтения с экрана). Итак, если мы хотим показать скрытый div, нам нужно избавиться от класса .hidden Twitter Bootstrap, поэтому мы избавимся от важных утверждений, но если мы спрячем его снова, мы хотим иметь .hidden класс снова! Для этого мы можем использовать [.toggleClass] [3].

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

Таким образом, вы продолжаете использовать скрытый класс при каждом скрытии содержимого.

Класс .show в TB фактически совпадает с встроенным стилем jQuery, как 'display: block'. Но если класс .show в какой-то точке будет другим, тогда вы просто добавите этот класс:

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