jQuery show () для класу css Twitter Bootstrap приховано

89

Я використовую Twitter Bootstrap, і я помічаю, що jQuery show()або fadeIn()не робить елемент DOM, позначений класом, hiddenз’являтися, оскільки функції jQuery лише видаляють display: noneспецифікацію. Однак значення visibilityвсе ще встановлено hidden.

Цікаво, який найкращий можливий спосіб обійти це?

Видаліть hiddenклас з елемента
Змініть властивість видимості
Перезаписати прихований клас у власному css

Зокрема, я хочу знати, чи краще це виправити за допомогою jQuery чи css, і чому.

jquery twitter-bootstrap

— Лім Х.
джерело

Зазвичай я не використовую {visibility: hidden}, оскільки це залишає елемент у DOM, щоб зайняти простір. Чи є якась причина, за якою вам потрібно це зробити?

— isherwood

1

@isherwood The visibility: hiddenвід bootstrap responsive.

— Lim H.

124

Клас css, який ви шукаєте, - це .collapse. Це встановлює для елемента значенняdisplay: none;

Тож використання $('#myelement').show()буде працювати належним чином.

ОНОВЛЕННЯ: Bootstrap v3.3.6 оновив .collapse назад до:

.collapse {
  display: none;
}

— Еоіній
джерело

2

Це має бути прийнятою відповіддю. Він також працює з .slideDown()і .fadeIn()т. Д. .hiddenУ Bootstrap - це речі, які ніколи не хочуть відображати.

— чудовий

Чи є це новим у bootstrap 3?

— Lim H.

Ні - я бачив, як це використовується в документації. <div class = "nav-kolaps kolaps"> Цей рядок взятий із прикладів v2.3.2.

— Eoinii

33

На жаль, ця відповідь більше не працює з Boostrap 3. .collapseТепер також встановлюєтьсяvisibility: hidden;

— Tom17

9

Працює в моєму Bootstrap 3?

— Джеймс Маккормак,

21

Це призведе до зникнення вашого невидимого елемента та видалення класу

$('#element.hidden').css('visibility','visible').hide().fadeIn().removeClass('hidden');

http://jsfiddle.net/7qxVL/

Якщо вам насправді не потрібно, щоб елемент був невидимим (тобто зайняв простір), ви можете перевизначити .hidden (у вашому локальному css, не змінюйте джерело завантаження, або навіть краще, у вашому локальному файлі LESS).

— Девід Фреголі
джерело

Подяка спрацювала на мене! Я спростив просто зробити :: fadeIn (). RemoveClass ('hidden') - немає необхідності маніпулювати css безпосередньо або приховувати.

— dbrin

1

Дивіться відповідь, розміщену @IrishJoker. Ви не повинні використовувати .hiddenелементи, які потрібно відобразити за допомогою JavaScript. Використовуйте .collapseзамість цього.

— чудовий

13

Увага:

bootstrap 3.3.0 щойно змінив .collapse на:

.collapse {
  display: none;
  visibility: hidden;
}

Що є надзвичайною зміною для jQuery.show (), мені довелося повернутися до вбудовування:

<div class="alert alert-danger" style="display:none;" >
</div>

продовжувати використовувати jQuery наступним чином:

$('.alert').html("Change a few things up and try submitting again.").show()

Єдиним класом, який я міг знайти в bootstrap 3.3.0, щоб застосувати лише 'display: none', є

.navbar {
  display: none;
}

— Тед Кіллілея
джерело

1

Я не бачу вагомих причин для Bootstrap це робити. У мене особисто завжди є інший файл css, який використовується для «перевизначення» налаштувань css - я б замінив .collapse на просто налаштування дисплея. Таким чином, ви можете йти вперед, не турбуючись про те, що все зламається. Біль у повідомленні :(

— Eoinii

Рішення у Bootstrap 3.3.x полягає у використанні .collapse('hide')та .collapse('show')замість методів jQuery. Ви можете встановити початкову видимість безпосередньо в HTML за допомогою класу collapse(приховати) або collapse in(показати). Див. Getbootstrap.com/javascript/#collapse .

— alexw

Остання версія 3.3.6

— скасувала

5

У мене була та сама проблема. Я використав цей патч:

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

Потім у мене виникла інша проблема, оскільки моя програма генерує нові елементи та додає / додає їх. Що я, нарешті, зробив, це після створення нового елемента, який я роблю:

var newEl = ...;
$(newEl).find('.hidden').hide().removeClass('hidden');

— гаялоні
джерело

4

Для мене це було тому, що bootstrap використовує !importantхак як для класу hide, так і для hidden.

Отже, ви не можете використовувати show()методи etc, що надаються з jquery. Натомість вам доведеться переписати ще жахливіший код, перезаписавши хакерський код.

$('#myelement').attr('style', 'display: block !important');

! Важливим є крайній варіант і насправді не повинен використовуватися в такій базовій бібліотеці, як bootstrap.

— Джон Магнолія
джерело

4

Це працює, але я спробую спробувати першу відповідь і змінити класи на .collapse.

.toggleClass('hidden')

— Хлоя
джерело