DIV 숨겨진 요소 공간 조정

-1

페이지의 내용을 표시하거나 숨기려면 토글을 사용하고 있습니다. javascript에서 onclick 이벤트를 기반으로 div 요소의 가시성을 변경하고 잘 작동합니다.

내 문제는 onclick 전에 일부 콘텐츠가 숨겨져 있어도 페이지에 공간이 할당되고 한 번 클릭 이벤트 발생 텍스트가 공간에 표시되는 경우에도 발생합니다. 다시 클릭하면 텍스트가 사라집니다.

공간을 없애고 싶지 않으면 그렇지 않으면 어색해 보입니다. 추가 참조를 위해 이미지를 첨부하겠습니다. 자바 스크립트, CSS 및 PHP jquery 솔루션 만 사용하십시오. 그건 당신이 무엇을하고 있는지 경우 Image of the problem

출처

2012-09-12 user1633170

편집 해 주셔서 감사합니다. 설명이 혼란 스럽습니다. 저는 급하게했습니다. – user1633170

의 당신은 CSS display: none보다는 visibility: hidden를 사용한다. visibility: hidden은 요소를 보이지 않게 만들지 만 문서에서는 해당 위치를 유지하지만 display: none은 문서 흐름에서 항목을 모두 제거합니다.

출처

2012-09-12 19:04:42

고마워요. 작동합니다. 디스플레이 속성을 알지 못합니다. – user1633170

@ user1633170 도와 줘서 기쁩니다. 나는'display '를 발견하기 전에 당신이'visibility' 속성을 가로 질렀다는 것이 이상하다는 것을 알고 있습니다. 왜냐하면'display'가 아마도 개발자들에 의해 1000 배 더 자주 사용되기 때문입니다. –

사용

display: none;

대신

visibility: hidden;

출처

2012-09-12 19:04:06 Krycke

고맙습니다. 작동합니다. – user1633170

문제가없는 친구입니다. – Krycke

코드를 보지 않고 오류를 판별하기는 어렵지만 여기서는 좋은 예가 나와 있습니다.

<script language="javascript"> 
function toggle() { 
var ele = document.getElementById("toggleText"); 
var text = document.getElementById("displayText"); 
if(ele.style.display == "block") { 
     ele.style.display = "none"; 
    text.innerHTML = "show"; 
} 
else { 
    ele.style.display = "block"; 
    text.innerHTML = "hide"; 
} 
} 
</script> 

<a id="displayText" href="javascript:toggle();">show</a> <== click Here 
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

출처

2012-09-12 19:05:30 James

DIV 숨겨진 요소 공간 조정

답변

관련 문제