Twitter Bootstrap CSS 클래스에 대한 jQuery show()가 숨겨짐

Twitter Bootstrap CSS 클래스에 대한 jQuery show()가 숨겨짐

트위터 부트스트랩을 사용하고 있는데 jQuery가show()또는fadeIn()DOM 요소를 클래스로 표시하지 않습니다.hiddenjQuery 기능이 다음만 제거하기 때문에 나타납니다.display: none사양.하지만, 그visibility여전히 로 설정되어 있습니다.hidden.

이 문제를 해결할 수 있는 가장 좋은 방법이 무엇인지 궁금합니다.

1. 제거합니다.hidden그 요소에 관한 수업
2. 가시성 속성 변경
3. 내 CSS의 숨겨진 클래스 덮어쓰기

특히 이것을 jQuery나 css로 수정하는 것이 더 나은지, 그 이유를 알고 싶습니다.

당신이 찾고 있는 css 수업은.collapse요소를 다음으로 설정합니다.display: none;

그래서 사용하기$('#myelement').show()제대로 작동합니다.

업데이트: 부트스트랩 v3.3.6이 .collapse를 다시 업데이트했습니다.

.collapse {
  display: none;
}

그러면 보이지 않는 요소가 페이드되어 클래스가 제거됩니다.

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

http://jsfiddle.net/7qxVL/

요소를 보이지 않게(즉, 공간을 차지) 할 필요가 없다면 .hidden을 재정의할 수 있습니다(로컬 CSS에서는 부트스트랩 소스를 변경하지 마십시오. 더 나은 경우 로컬 LESS 파일에서).

경고:

부트스트랩 3.3.0이 방금 .vmdk를 다음으로 변경했습니다.

.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()

부트스트랩 3.3.0에서 'display:none'만 적용할 수 있는 유일한 클래스는

.navbar {
  display: none;
}

저도 같은 문제가 있었습니다.이 패치를 사용했습니다.

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

그 다음에는 애플리케이션이 새로운 요소를 생성하고 추가/추가하기 때문에 또 다른 문제가 발생했습니다.새로운 요소를 생성한 후에 최종적으로 수행한 작업은 다음과 같습니다.

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

나에게 그것은 부트스트랩이 사용하고 있기 때문이었습니다.!important클래스 숨김과 숨김을 모두 해킹합니다.

그래서 당신은 그것을 사용할 수 없습니다.show()기타 방법은 jquery와 함께 제공됩니다.대신 당신은 훨씬 더 끔찍한 코드를 덮어써야 합니다.

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

!important는 최후의 수단이며 부트스트랩과 같은 핵심 라이브러리에서 사용해서는 안 됩니다.

이것은 효과가 있지만, 저는 첫 번째 답을 시도하고 수업을 변경할 것입니다..collapse.

.toggleClass('hidden')

언급URL : https://stackoverflow.com/questions/14610412/jquery-show-for-twitter-bootstrap-css-class-hidden