Jquery .show ()는 숨겨진 가시성을 가진 div를 표시하지 않습니다.


81

기본적인 jQuery 질문 :

divjQuery를 사용하여 숨겨진 것으로 표시된 을 공개하려고합니다 . 그러나 그것을 얻지 못하고 있습니다.

여기에 JSFiddle을 만들었습니다 : http://jsfiddle.net/VwjxJ/

기본적으로 숨겨진 요소의 공간을 유지 하기 style="visibility: hidden;"보다는 사용 style="display: none;"하고 싶습니다.

사용하여 시도했다 show(), fadeIn()등등하지만 어느 작업 (그들이 할 style="display: none;")

내가 도대체 ​​뭘 잘못하고있는 겁니까?


6
jsfiddle의 프레임 워크를 jQuery로 변경해보십시오.
— a'r

1
@ a'r : 문제는 여전히 남아 있습니다 . 수정 된 버전은 다음과 같습니다. jsfiddle.net/fkling/9Z6nt/19
— Felix Kling

귀하의 예제에서는 프로젝트에 적합한 라이브러리를 설정하지 않았으며 "프레임 워크 선택"에서 "jQuery"를 선택해야합니다.
— megas

5
하나는 ... 사람들이 문제를 이해하려고 더 많은 시간을 할애해야 .... downvotes에 대응하기
— 펠릭스 클링에게

5
다른 사람들이 올바른 라이브러리를 선택하는 것을 잊었다 고 생각했기 때문이라고 생각합니다 (그리고 변경 한 후에는 작동하는 것 같았습니다). 그러나 그들은 당신의 질문과 코드를주의 깊게 읽지 않았습니다. 첫 번째 댓글이 5 개의 찬성 투표를받는 이유는 무엇인가요? 예, 귀하의 jsfiddle이 정확하지 않을 수도 있지만 imo를 반대 할 이유는 없습니다. 그것 없이도 문제는 분명했습니다 (그리고 수정하기 쉬웠습니다).
— Felix Kling 2011-08-26

답변:


123

숨긴 경우 visibility:hiddenjQuery로 표시 할 수 있습니다.

$(".Deposit").css('visibility', 'visible');

그리고 바이올린에는 jQuery가 없습니다. 다음은 데모입니다. http://jsfiddle.net/9Z6nt/20/


document.ready필요가 없습니다. 코드가 실행됩니다 onLoad(프레임 워크 위의 선택 상자).
— Felix Kling 2011-08-26

아, 몰랐네요, 고마워요. 그러나 DOM이 준비되기 전에 JS가 호출되면 실제 코드에서 도움이 될 것입니다.
— Muhammad Usman 2011-08-26

1
@Imray 그렇습니다. 의 해결책이 visibility:hidden아니라 그의 해결책 만을 고쳤습니다.
— Muhammad Usman

11

JQuery 문서에 따르면 .show()" .css('display', 'block')표시 속성이 처음에 있던대로 복원된다는 점을 제외 하면를 호출하는 것과 거의 동일합니다 ." 대신 명시 적으로 스타일을 설정하십시오. CSS 클래스를 사용할 수 있습니다.

.hidden{
    visibility: hidden;
}
.shown{
    visibility: visible;
}

세트는

$("#yourdiv").removeClass("hidden").addClass("shown");

$("#yourdiv").toggleClass('hidden'); "표시된"클래스는 필요 없음
— Alexander Bird

1
정확히 똑같지는 않습니다. CSS의 다른 부분에서 가능한 더 일반적인 재정의에 따라 다르지만 일반적으로 아마 그럴 것입니다.
— Polymorphix

7

숨겨진 요소의 공간을 유지하려면 불투명도를 사용하십시오.

즉 :

$('div').fadeTo(500,1) //show
$('div').fadeTo(500,0) //hide

예를 들면 :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style='opacity:0'>
  Test opacity
</div>


<button onclick="$('div').fadeTo(500,1);">Show</button>
<button onclick="$('div').fadeTo(500,0);">Hide</button>


3

Hey man your fiddle is working just choose framework jQuery on the fiddle. 안녕하세요. 가시성이 숨겨진 경우 css 가시성 속성을 visible로 변경하십시오.

(".Deposit").css('visibility','visible');


2

여기 우리가 간다 :)

$(".Deposit").show();

    $(".Deposit").fadeOut(500,function(){
        $(this).css({"display":"block","visibility":"hidden"});

    });

그래, 그게 티켓이야!
— Kirby

당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.