JQuery show() для Twitter Bootstrap css class hidden

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

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

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

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

Ответы

Ответ 1

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

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

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

.collapse {
  display: none;
}

Ответ 2

Это приведет к исчезновению вашего невидимого элемента и удалению класса

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

http://jsfiddle.net/7qxVL/

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

Ответ 3

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

bootstrap 3.3.0 только что изменился .collapse to:

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

Ответ 4

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

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

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

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

Ответ 5

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

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

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

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

Ответ 6

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

.toggleClass('hidden')