[jquery] jQuery show () for Twitter Bootstrap css class hidden
Twitter Bootstrap을 사용하고 있으며 jQuery 함수가 사양 만 제거하기 때문에 jQuery show()
또는 fadeIn()
클래스로 표시된 DOM 요소가 hidden
나타나지 않도록합니다 display: none
. 그러나이 visibility
여전히로 설정되어 hidden
있습니다.
이 문제를 해결하는 가장 좋은 방법은 무엇일까요?
hidden
요소 에서 클래스 제거- 가시성 속성 변경
- 내 CSS에 숨겨진 클래스 덮어 쓰기
특히, 이것을 jQuery 또는 CSS로 수정하는 것이 더 나은지 그리고 그 이유를 알고 싶습니다.
답변
찾고있는 CSS 클래스는 .collapse
입니다. 이것은 요소를display: none;
따라서 사용 $('#myelement').show()
하면 제대로 작동합니다.
업데이트 :
Bootstrap v3.3.6은 .collapse를 다음으로 업데이트했습니다.
.collapse {
display: none;
}
답변
이것은 보이지 않는 요소를 페이드 인하 고 클래스를 제거합니다.
$('#element.hidden').css('visibility','visible').hide().fadeIn().removeClass('hidden');
요소가 실제로 보이지 않게 (즉, 공간을 차지) 필요하지 않은 경우 .hidden을 재정의하고 싶을 수 있습니다 (로컬 CSS에서는 부트 스트랩 소스를 변경하지 않거나 로컬 LESS 파일에서 더 나은 방법으로).
답변
경고:
부트 스트랩 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()
부트 스트랩 3.3.0에서 ‘display : none’만 적용 할 수있는 유일한 클래스는
.navbar {
display: none;
}
답변
나는 같은 문제가 있었다. 이 패치를 사용했습니다.
$(function() {
$('.hidden').hide().removeClass('hidden');
});
그런 다음 응용 프로그램이 새 요소를 생성하고 추가 / 앞에 추가하기 때문에 또 다른 문제가 발생했습니다. 내가 마지막으로 한 일은 내가하는 새로운 요소를 생성 한 후입니다.
var newEl = ...;
$(newEl).find('.hidden').hide().removeClass('hidden');
답변
나를 위해 그것은 부트 스트랩이 !important
클래스 숨기기와 숨김 모두에 해킹을 입니다.
따라서 show()
jquery에서 제공 하는 etc 메소드를 사용할 수 없습니다 . 대신 해키 코드를 덮어 쓰는 훨씬 더 끔찍한 코드를 덮어 써야합니다.
$('#myelement').attr('style', 'display: block !important');
! important는 최후의 수단이며 실제로 부트 스트랩과 같은 핵심 라이브러리에서 사용해서는 안됩니다.
답변
이것은 작동하지만 첫 번째 답변을 시도하고 클래스를 .collapse
.
.toggleClass('hidden')