Скажімо, я створюю такий елемент 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>

Як я міг показати та приховати цей елемент HTML від jQuery / Javascript.

JavaScript:

$(function(){
  $("#my-div").show();
});

Результат: (з будь-яким із них).

Я хотів би, щоб елементи вище були прихованими.

Який найпростіший спосіб приховати елемент за допомогою Bootstrap і показати його за допомогою jQuery?

Правильна відповідь

Запуск 4.x

Bootstrap 4.x використовує новий .d-noneклас . Замість того, щоб використовувати або .hidden , або .hideякщо ви використовуєте Bootstrap 4.x використання .d-none.

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

• Щоб показати це: $("#myId").removeClass('d-none');
• Щоб приховати це: $("#myId").addClass('d-none');
• Щоб переключити його: $("#myId").toggleClass('d-none');

(завдяки коментарю Fangming)

Запуск 3.x

По-перше, не використовуйте .hide! Використовуйте .hidden. Як інші казали, .hideце застаріле,

.hide доступна, але вона не завжди впливає на зчитувачі екрану і застаріла з версії v3.0.1

По-друге, використовуйте jQuery's .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;
}

Просто:

$(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, який не встановлює значення!! В кінці правила, як це:

.hideMe {
    display: none;
}

і використовується так:

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

і тепер jQuery ховає роботи

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

Метод @ dustin-Graham окреслив те, як я це теж роблю. Пам'ятайте також, що завантажувач 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, які тепер несуть важливе правило!

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

Відповідь 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 поставить вирішення цієї проблеми.

У завантажувальній програмі 4 ви можете використовувати d-noneклас, щоб повністю приховати елемент. https://getbootstrap.com/docs/4.0/utilities/display/

Оновлення : відтепер я використовую .collapseта $('.collapse').show().

Для завантажувальної програми 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, ми вдосконалюємо цей параметр за замовчуванням, роблячи [прихований] {display: none! }, щоб запобігти випадковому перекриттю його дисплея. Хоча IE10 не підтримує [приховано], явна декларація в нашому CSS вирішує цю проблему.

<input type="text" hidden>

Існує також те, .invisibleщо впливає на макет.

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

Клас .invisible можна використовувати для переключення лише видимості елемента, тобто його відображення не змінюється, і елемент все ще може впливати на потік документа.

приховані та приховані як застарілі, так і пізніше видалені, більше не існують у нових версіях. Ви можете використовувати класи d-none / d-sm-none / невидимі тощо, залежно від ваших потреб. Ймовірна причина, що їх було видалено, - це те, що прихований / прихований трохи заплутаний у контексті CSS У CSS приховування (приховане) використовується для видимості, а не для відображення. видимість і відображення - це різні речі.

Якщо вам потрібен клас видимості: приховано, вам потрібен невидимий клас з утиліти видимості.

Перевірте нижче як види, так і утиліти відображення:

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

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

Використовуйте такий фрагмент для Bootstrap 4, який розширює jQuery:

(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. Використовуйте його за допомогою синтаксису

   $ (). hidShow ('приховати');

   $ (). hidShow ('показ');

сподіваємось, хлопці вважаєте це корисним. :-)

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

Я вирішив свою проблему, редагуючи CSS-файл Bootstrap, дивіться їх документ:

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

"FadeIn" jQuery не працюватиме через "видимість".

Отже, для останнього Bootstrap, .hide вже не використовується, але він все ще знаходиться у файлі min.css. тож я покинув .hidden AS IS ТА щойно видалив "! важливий" з класу ".hide" (який, як передбачається, все одно буде застарілим). але ви також можете просто змінити його у вашому власному CSS, я просто хотів, щоб усі мої програми діяли однаково, тому я змінив CSS-файл Bootstrap.

І тепер jQuery "fadeIn ()" працює.

Причина того, що я зробив це проти пропозицій, наведених вище, полягає в тому, що при "видаленніClass ('. Приховати") "об'єкт негайно відображається, і ви пропускаєте анімацію :)

Я сподіваюся, що це допомогло іншим.

☀️ Більш відповідна відповідь

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

Twitter Bootstrap надає класи для переключення вмісту, див. Https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less .

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

По-перше, рішенням "приховати" та "показати" елемент (клас wsis-згортання) при натисканні на інший елемент (клас wsis-toggle) - використовувати .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-togglejQuery додається стиль вбудованого тексту:

display: block

Через те, що !importantв Twitter Bootstrap цей стиль вбудованої форми не впливає, тому нам потрібно видалити .hiddenклас, але я не рекомендую .removeClassцього робити ! Тому що, коли jQuery збирається щось приховати ще раз, він також додає стиль вбудованого тексту:

display: none

Це не те саме, що .hidden клас Twitter Bootstrap, який оптимізований і для AT (зчитувачі екрану). Отже, якщо ми хочемо показати прихований дів, нам потрібно позбутися .hiddenкласу Twitter Bootstrap, тому ми позбудемося важливих тверджень, але якщо ми приховатимемо його знову, ми хочемо .hiddenповернути клас ще раз! Для цього ми можемо використовувати [.toggleClass] [3].

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

Таким чином ви продовжуєте використовувати прихований клас кожен раз, коли вміст приховано.

.showКлас ТБ фактично такий же , як вбудований стиль в JQuery, як 'display: block'. Але якщо .showклас у якийсь момент буде іншим, то ви просто також додасте цей клас:

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