просто:

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

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

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

на hide класс полезен, чтобы сохранить содержимое скрытым при загрузке страницы.

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

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

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

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

.hideMe {
    display: none;
}

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

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

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

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

используйте bootstrap .развал вместо .скрытый

позже в JQuery вы можете использовать .шоу или. 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();
});

Мне нравится использовать 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) сломался, потому что мы ставили скрыть на элементах в шаблоне страницы. Мы пошли по пути создания именованных версий классов Bootstrap, которые теперь несут уродливые !важно!--7--> правило.

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

ответ разза хорош, если вы готовы переписать то, что вы сделали.

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

/**
 * 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 поставляется с исправлением этой проблемы.

Для Bootstrap 4 Alpha 6

для Bootstrap 4 Вы должны использовать .hidden-xs-up.

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

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

<input type="text" hidden>

есть еще .invisible что влияет на макет.

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

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

в bootstrap 4 Вы можете использовать d-none класс, чтобы полностью скрыть элемент. https://getbootstrap.com/docs/4.0/utilities/display/

скрыть и скрыть устарели и позже удалены, больше не существуют в новых версиях. Вы можете использовать классы D-none/D-sm-none/invisible etc в зависимости от ваших потребностей. Вероятная причина, по которой они были удалены, заключается в том, что hidden/hide немного запутан в контексте CSS. В CSS скрыть (hidden) используется для видимости, а не для отображения. видимость и дисплей-разные вещи.

Если вам нужен класс для видимости: скрытый, то вам нужен невидимый класс из видимости коммунальные услуги.

Проверьте ниже как видимость, так и утилиты отображения:

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

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

Я решил свою проблему, отредактировав файл CSS Bootstrap, см. Их doc:

.скрыть:

.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. и я ушел .скрытый как есть и просто удалил "!важно" от ".скрыть " класс ( который должен быть во всяком случае, устарел ). но вы также можете просто переопределить его в своем CSS, я просто хотел, чтобы все мое приложение действовало одинаково, поэтому я изменил файл css Bootstrap.

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

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

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

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 compliant:

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 .скрывать. ,)(шоу. ,)(коленчатый рычаг.)( Надеюсь, это поможет.

    /*
     * .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;
    };

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) class .hidden также:

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

при нажатии на кнопку .wsis-toggle, jQuery добавляет встроенный стиль:

display: block

из-за !important в Twitter Bootstrap этот встроенный стиль не имеет никакого эффекта, поэтому нам нужно удалить .hidden класс, но я не рекомендую .removeClass для этого! Потому что, когда jQuery собирается что-то скрыть снова, он также добавляет встроенный стиль:

display: none

это не то же самое .скрытый класс 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" );
    });
});