jQuery show () для Twitter Bootstrap класс css скрыт

89

Я использую Twitter Bootstrap и я замечаю , что JQuery show()или fadeIn()не делает DOM элемент , отмеченный класс hiddenпоявляется , поскольку функции JQuery только удалить display: noneспецификацию. Тем не менее, по- visibilityпрежнему установлено значение hidden.

Интересно, как лучше всего обойти это?

  1. Удалите hiddenкласс элемента
  2. Измените свойство видимости
  3. Перезаписать скрытый класс в моем собственном CSS

В частности, я хочу знать, лучше ли исправить это с помощью jQuery или css и почему.

jquery twitter-bootstrap Лим Х.
источник
Обычно я не использую {visibility: hidden}, потому что он оставляет элемент в DOM, чтобы он занимал место. Есть ли причина, по которой вам это нужно?
isherwood
1
@isherwood Это visibility: hiddenот начальной загрузки.
Лим Х.

Ответы:

124

Класс css, который вы ищете, - это .collapse. Это устанавливает элемент вdisplay: none;

Так что использование $('#myelement').show()будет работать правильно.

ОБНОВЛЕНИЕ: Bootstrap v3.3.6 обновил .collapse до:

.collapse {
  display: none;
}
Eoinii
источник
2
Это должен быть принятый ответ. Она также работает с .slideDown(), .fadeIn()и т.д. .hiddenв Bootstrap для вещей вы никогда не будет выводиться.
snumpy
Это что-то новое в бутстрапе 3?
Лим Х.
Нет, я видел его в документации. <div class = "nav-collapse collapse"> Эта строка взята из примеров 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-файле).

Дэвид Фреголи
источник
Спасибо, у меня сработало! Я упростил задачу: do :: fadeIn (). RemoveClass ('hidden') - нет необходимости напрямую манипулировать css или скрывать.
dbrin
1
См. Ответ @IrishJoker. Вы не должны использовать .hiddenэлементы, которые хотите отображать с помощью javascript. .collapseВместо этого используйте .
snumpy
14

Предупреждение:

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 заключается в использовании методов jQuery .collapse('hide')и .collapse('show')вместо них. Вы можете установить начальную видимость прямо в HTML через класс collapse(скрыть) или collapse in(показать). См. Getbootstrap.com/javascript/#collapse .
Alexw
В последней версии 3.3.6 это изменение было отменено
Eoinii
5

У меня такая же проблема. Я использовал этот патч:

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

Затем у меня возникла другая проблема, поскольку мое приложение генерирует новые элементы и добавляет / добавляет их. Что я наконец сделал, так это после генерации нового элемента:

var newEl = ...;
$(newEl).find('.hidden').hide().removeClass('hidden');
гуялони
источник
4

Для меня это было потому, что bootstrap использует !importantхак как для скрытия, так и для скрытого класса.

Таким образом, вы не можете использовать show()методы etc, предоставляемые с jquery. Вместо этого вам нужно перезаписать еще более ужасный код, перезаписав взломанный код.

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

! important - это крайний вариант, и его действительно не следует использовать в базовой библиотеке, такой как bootstrap.

Джон Магнолия
источник
4

Это работает, но я попробую первый ответ и поменяю классы на .collapse.

.toggleClass('hidden')
Хлоя
источник