jQuery show () для Twitter Bootstrap CSS Class hidden

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

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

  1. удалить hidden класс на элементе
  2. изменить свойство visibility
  3. перезаписать скрыта класс в моем собственном css

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

6 81
jquery twitter-bootstrap

6 ответов:

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

так что с помощью $('#myelement').show() будет работать должным образом.

обновление : Начальной загрузки В3.3.6 обновил .свернуть обратно в:

.collapse {
  display: none;
}
112

Это будет исчезать ваш невидимый элемент и удалить класс

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

http://jsfiddle.net/7qxVL/

Если вам действительно не нужно, чтобы элемент был невидимым (т. е. занимал пространство), вы можете переопределить его .скрытый (в вашем локальном css, не меняйте источник начальной загрузки или даже лучше, в вашем локальном файле LESS).

20

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

bootstrap 3.3.0 только что изменился .свернуть в:

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

что является критическим изменением для jQuery.show () мне пришлось вернуться к inlining:

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

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

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

тогда у меня была другая проблема, так как мое приложение генерирует новые элементы и добавляет/добавляет их. То, что я, наконец, сделал, это после генерации нового элемента, который я делаю:

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

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

.toggleClass('hidden')
4

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

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

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

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

3