[jquery] jQuery show () for Twitter Bootstrap css class hidden

Program / 글쓴이

Twitter Bootstrap을 사용하고 있으며 jQuery 함수가 사양 만 제거하기 때문에 jQuery show()또는 fadeIn()클래스로 표시된 DOM 요소가 hidden나타나지 않도록합니다 display: none. 그러나이 visibility여전히로 설정되어 hidden있습니다.

이 문제를 해결하는 가장 좋은 방법은 무엇일까요?

  1. hidden요소 에서 클래스 제거
  2. 가시성 속성 변경
  3. 내 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');

http://jsfiddle.net/7qxVL/

요소가 실제로 보이지 않게 (즉, 공간을 차지) 필요하지 않은 경우 .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')

답변