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


235

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


Для того, щоб це питання було актуальним, я змінив його для роботи над обома завантажувальними програмами, оскільки відповідь - це лише різниця у назві класу.
Еван Керролл

Відповіді:


392

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

Запуск 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;
}

4
Дякую вам велике, що мені було цікаво стаквервер за щось подібне довгий час для простої відповіді. Дякую
Результати пошуку Веб-результати Pi

Хтось має уявлення, які існують методи: show () і hid (())?
контрольний список

9
Тоді ви не можете його анімувати (напр. fadeIn()). Тому використовуйте клас collapseзамість hidden. І тоді, звичайно , немає необхідності у використанні removeClass, addClassі т.д.
TheStoryCoder

2
Для Bootstrap 4 ви повинні використовувати .hidden-xs-up. v4-alpha.getbootstrap.com/layout/responsive-utilities/… Існує також hiddenатрибут HTML5. v4-alpha.getbootstrap.com/content/reboot/…
Хлоя

1
@Kangur jQuery .hide()не є .hideкласом завантаження . Метод jQuery працює добре, але це не спосіб завантаження. Бібліотеки завантажувальної програми залежать від включення .hidden класу до елемента, щоб визначити його там. jQuery цього не додає - якщо тільки ви не зламаєте його, як тут: stackoverflow.com/a/27439371/124486 , в цьому випадку ви можете зламати інші конкретні речі jQuery.
Еван Керролл

65

Просто:

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

Або якщо ви хочете, щоб клас все ще був там:

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

1
Ось плагін jQuery, який дозволяє використовувати .show () та .hide () навіть із класами "прихований" та "ховати" завантажувальний. gist.github.com/zimkies/8360181
zimkies

9
Згідно з документацією Bootstrap, .hide доступна, але вона не завжди впливає на зчитувачі екрану і застаріла з версії v3.0.1. Використовуйте замість них .hidden або .sr.
bjtilley

18

Використовуйте завантажувальний .collapse замість .hidden

Пізніше в JQuery ви можете використовувати .show () або .hide () для маніпулювання ним


16

Це рішення застаріле. Скористайтеся верхнім рішенням, проголосованим.

hideКлас корисний , щоб зберегти зміст приховану на сторінці завантаження.

Моє рішення для цього під час ініціалізації переключиться на приховування jquery:

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

Тоді show()і hide()має функціонувати як нормально.


1
.hide застаріло станом на v3.0.1
Еван Керролл

2
Гаразд, використовуйте .hidden станом на v3.0.1
Дастін Грем

У цьому випадку можуть бути мерехтіння вмісту, який відображається за мікросекунди до того, як приховано за допомогою JS.
Сергій Романов

Виклик .hide () спочатку застосовує дисплей: немає; до тегу стилів. Це відбувається до видалення класу приховати. Якщо у вас в такому порядку, він не повинен мерехтіти.
Дастін Грем

14

Ще один спосіб вирішити цю неприємність - створити свій власний клас CSS, який не встановлює значення!! В кінці правила, як це:

.hideMe {
    display: none;
}

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

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

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

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

Він обходить проблему, поставлену за допомогою класів bootstrap. Чому спростуєте це коротке і просте рішення?
дбрін

Оскільки це коротке та просте рішення не дає відповіді на запитання, яке конкретно вимагає використання класів bootstrap3. Не кажучи вже про те, що простий, .hidden у Bootstrap визначений як .hidden { display: none !important; visibility: hidden !important; }
Еван Керролл

2
і саме в цьому проблема, JQuery приховати і показати методи не добре працюють з цим css.
дбрін

5

Метод @ dustin-Graham окреслив те, як я це теж роблю. Пам'ятайте також, що завантажувач 3 зараз використовує "приховано", а не "приховувати", згідно з їх документацією на getbootstrap . Тож я зробив би щось подібне:

$(document).ready(function() {
    $('.hide').hide().removeClass('hide');
    $('.hidden').hide().removeClass('hidden');
});

Тоді, коли використовувати jQuery show()та hide()методи, конфлікту не буде.


Настільки елегантно і просто - ви просто подолали поширений недолік Bootstrap. Я б використовував hiddenклас, а потім намагався робити show()в jQuery, і нічого не трапиться. Ваше рішення виправляє це так легко, і я не думав про це.
Воломіке

5

Ініціюйте елемент як такий:

<div id='foo' style="display: none"></div>

А потім скористайтеся подією, яку ви хочете показати, як такою:

$('#foo').show();

Я вважаю, найпростіший шлях.


3

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

2

Мені подобається використовувати toggleClass:

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

Це було б чудово, але switchцілком не потрібно.
Еван Керролл

2
$(function(){

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

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

})

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


2

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

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

3.1 не підтримує .hide, він .hidden.
Еван Керролл

2

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


1
Чи потрібно або оптимально перевірити, чи існує клас, перш ніж дзвонити .removeClass()або .addClass()?
Еван Керролл

Крім того, вже не .removeClass()працює над набором? Не могли б ви просто зателефонувати$(this).removeClass('show')
Еван Керролл


2

Оновлення : відтепер я використовую .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 можна використовувати для переключення лише видимості елемента, тобто його відображення не змінюється, і елемент все ще може впливати на потік документа.


1

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

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

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

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

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


1

Використовуйте такий фрагмент для 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 ('показ');

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


0

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

0

Виходячи з вищенаведених відповідей, я щойно додав власні функції, і це більше не суперечить доступним функціям 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;
    };

0

Я вирішив свою проблему, редагуючи 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 ('. Приховати") "об'єкт негайно відображається, і ви пропускаєте анімацію :)

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


0

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

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

-1

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

@EvanCarroll, чому він складний? Я також читав вашу відповідь і бачу, що ви пропонуєте використовувати toggleClass, що я також роблю, тому я не розумію ваш коментар.
користувач2312234
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.