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.