이와 같은 HTML 요소를 생성한다고 가정 해 보겠습니다.

<div id="my-div" class="hidden">Hello, TB3</div>
<div id="my-div" class="hide">Hello, TB4</div>
<div id="my-div" class="d-none">Hello, TB4</div>

jQuery / Javascript에서 해당 HTML 요소를 표시하고 숨기는 방법은 무엇입니까?

자바 스크립트 :

$(function(){
  $("#my-div").show();
});

결과 : (이 중 하나와 함께).

위의 요소를 숨기고 싶습니다.

부트 스트랩을 사용하여 요소를 숨기고 jQuery를 사용하여 표시하는 가장 간단한 방법은 무엇입니까?

답변

정답

부트 스트랩 4.x

Bootstrap 4.x는 새로운 .d-none클래스를 사용합니다 . 을 사용 하는 대신 .hidden또는 .hideBootstrap 4.x를 사용하는 경우을 사용하십시오 .d-none.

<div id="myId" class="d-none">Foobar</div>

그것을 보여주기 위해 : $("#myId").removeClass('d-none');
숨기려면 $("#myId").addClass('d-none');
토글하려면 : $("#myId").toggleClass('d-none');

(Fangming의 의견에 감사드립니다)

부트 스트랩 3.x

먼저 사용하지 마십시오 .hide! 사용하십시오 .hidden. 다른 사람들이 말했듯 .hide이 더 이상 사용되지 않습니다.

.hide를 사용할 수 있지만 화면 판독기에 영향을주는 것은 아니며 v3.0.1부터 사용되지 않습니다.

둘째, jQuery의 .toggleClass () , .addClass () 및 .removeClass ()를 사용하십시오.

<div id="myId" class="hidden">Foobar</div>

그것을 보여주기 위해 : $("#myId").removeClass('hidden');
숨기려면 $("#myId").addClass('hidden');
토글하려면 : $("#myId").toggleClass('hidden');

CSS 클래스를 사용하지 마십시오 .show. 유스 케이스가 매우 작습니다. 의 정의는 show, hidden및 invisible에있는 문서 .

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

답변

간단히:

$(function(){
  $("#my-div").removeClass('hide');
});

또는 어떻게 든 수업을 계속 원한다면 :

$(function(){
  $("#my-div").css('display', 'block !important');
});

답변

.hidden 대신 bootstrap .collapse를 사용하십시오.

나중에 JQuery에서 .show () 또는 .hide ()를 사용하여 조작 할 수 있습니다.

답변

이 솔루션은 더 이상 사용되지 않습니다. 가장 많이 투표 된 솔루션을 사용하십시오.

이 hide클래스는 페이지로드시 컨텐츠를 숨기는 데 유용합니다.

이것에 대한 나의 해결책은 초기화하는 동안 jquery의 숨기기로 전환하십시오.

$('.targets').hide().removeClass('hide');

이어서 show()하고 hide()정상적으로 작동한다.

답변

이 성가심을 해결하는 또 다른 방법은 다음과 같이 규칙 끝에! important를 설정하지 않는 자체 CSS 클래스를 만드는 것입니다.

.hideMe {
    display: none;
}

다음과 같이 사용됩니다.

<div id="header-mask" class="hideMe"></div>

이제 jQuery 숨기기가 작동합니다.

$('#header-mask').show();

답변

@ dustin-graham이 설명한 방법은 내가하는 방법입니다. 부트 스트랩 3은 이제 getbootstrap 의 문서에 따라 “숨기기”대신 “숨김”을 사용 합니다. 그래서 나는 이런 식으로 할 것입니다 :

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

그런 다음 jQuery show()와 hide()메소드를 사용할 때마다 충돌이 없습니다.

답변

다음과 같이 요소를 시작하십시오.

<div id='foo' style="display: none"></div>

그런 다음 표시하려는 이벤트를 다음과 같이 사용하십시오.

$('#foo').show();

가장 간단한 방법은 믿습니다.