jQuery show () Twitter Bootstrap css sınıfı gizli

89

Ben Heyecan Bootstrap kullanıyorum ve jQuery fark show()veya fadeIn()sınıf ile işaretlenmiş DOM öğesi yapmaz hiddenjQuery işlevleri sadece kaldırmak çünkü görünür display: noneşartname. Ancak visibilityyine de olarak ayarlanmıştır hidden.

Acaba bu konuda çalışmanın en iyi yolu nedir?

Öğedeki hiddensınıfı kaldır
Görünürlük özelliğini değiştirin
Gizli sınıfın üzerine kendi css'imde yaz

Özellikle, bunu jQuery veya css ile düzeltmenin daha iyi olup olmadığını ve nedenini bilmek istiyorum.

jquery twitter-bootstrap

— Lim H.
kaynak

Genelde {visibility: hidden} kullanmıyorum çünkü bu öğeyi DOM'da yer kaplaması için bırakıyor. Bunu yapmanız için bir sebep var mı?

— isherwood

1

@isherwood visibility: hiddenBootstrap duyarlıdır.

— Lim H.

124

Aradığınız css sınıfı .collapse. Bu, öğeyi şu şekilde ayarlar:display: none;

Yani kullanmak $('#myelement').show()düzgün çalışacaktır.

GÜNCELLEME: Bootstrap v3.3.6 .collapse'ı şu şekilde güncelledi:

.collapse {
  display: none;
}

— Eoinii
kaynak

2

Kabul edilen cevap bu olmalıdır. Ayrıca Bootstrap'te , vb . İle çalışır .slideDown(), asla görüntülenmesini istemediğiniz şeyler içindir. .fadeIn().hidden

— snumpy

Bootstrap 3'te yeni mi?

— Lim H.

Hayır - belgelerde kullanıldığını gördüm. <div class = "nav-collapse collapse"> Bu satır v2.3.2 örneklerinden alınmıştır.

— Eoinii

33

Ne yazık ki, bu cevap artık Boostrap 3 ile çalışmıyor. .collapseŞimdi de belirleniyorvisibility: hidden;

— Tom17

9

Bootstrap 3'ümde çalışıyor mu?

— James McCormack

21

Bu, görünmez öğenizi solduracak ve sınıfı kaldıracaktır.

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

http://jsfiddle.net/7qxVL/

Öğenin görünmez olmasına gerçekten ihtiyacınız yoksa (yani alanı kaplayın) .hidden'i yeniden tanımlamak isteyebilirsiniz (yerel css'de, önyükleme kaynağını değiştirmeyin, hatta yerel LESS dosyanızda daha iyisi).

— David Fregoli
kaynak

Teşekkürler benim için çalıştı! Yapmak için basitleştirdim :: fadeIn (). RemoveClass ('hidden') - css'i doğrudan değiştirmeye veya gizlemeye gerek yok.

— dbrin

1

@IrishJoker tarafından gönderilen cevaba bakın. Sen kullanarak olmamalı .hiddenjavascript kullanarak görüntülemek istediğiniz öğeleri için. .collapseBunun yerine kullanın .

— snumpy

14

Uyarı:

bootstrap 3.3.0 .collapse'ı şu şekilde değiştirdi:

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

Bu jQuery.show () için önemli bir değişikliktir. Satır içi yapmaya geri dönmek zorunda kaldım:

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

jQuery'yi aşağıdaki gibi kullanmaya devam etmek için:

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

Bootstrap 3.3.0'da bulabildiğim tek sınıf, sadece 'display: none'

.navbar {
  display: none;
}

— Ted Killilea
kaynak

1

Bootstrap'in bunu yapması için iyi bir neden göremiyorum. Kişisel olarak her zaman css ayarlarını 'geçersiz kılmak' için kullanılan başka bir css dosyasına sahibim - .collapse'ı sadece görüntü ayarına sahip olacak şekilde değiştirirdim. Bu şekilde, her şeyin bozulmasından endişe etmeden ilerleyebilirsiniz. Mesajdaki ağrı :(

— Eoinii

Bootstrap 3.3.x çözüm kullanmaktır .collapse('hide')ve .collapse('show')yerine jQuery'nin yöntemlerden. İlk görünürlüğü sınıf aracılığıyla collapse(gizlemek için) veya collapse in(göstermek için) doğrudan HTML'de ayarlayabilirsiniz . Getbootstrap.com/javascript/#collapse sayfasına bakın .

— alexw

En son sürüm 3.3.6 bu değişikliği geri aldı

— Eoinii

5

Ben de aynı sorunu yaşadım. Bu yamayı kullandım:

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

Sonra başka bir sorun yaşadım, çünkü uygulamam yeni elemanlar oluşturuyor ve onları sonuna / başına ekliyor. Sonunda yaptığım şey, yaptığım yeni öğeyi oluşturduktan sonra:

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

— Guyaloni
kaynak

4

Benim için bunun nedeni, bootstrap'in hack'i !importanthem sınıf gizlemek hem de gizlemek için kullanıyor olmasıydı .

Yani show()jquery ile sağlanan etc yöntemlerini kullanamazsınız . Bunun yerine, hacky kodunun üzerine yazarak daha da korkunç kodların üzerine yazmanız gerekir.

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

! önemli bir son çare seçeneğidir ve gerçekten bootstrap gibi bir çekirdek kitaplıkta kullanılmamalıdır.

— John Magnolia
kaynak

4

Bu işe yarıyor, ancak ilk cevabı deneyeceğim ve sınıfları olarak değiştireceğim .collapse.

.toggleClass('hidden')

— Chloe
kaynak