왜 show()는 인라인 CSS를 사용하여 숨겨진 필드에만 작동합니까?

Question

나는과 같이, 인라인 CSS를 사용하여 요소를 숨기고 있어요 :

<span class="hidden-nojs" style="display:none">Some text</span> 

다음은 내가 jQuery를 그렇게 같은 요소를 표시하는 데 사용 : 이것은 위대한 작품을

$(".hidden-nojs").show(); 

. 최대한 빨리 인라인 CSS를 제거하고 hidden-nojs 클래스의 외부 CSS 스타일 시트에 display : none을 입력하면 작업이 중지됩니다. 이것은 외부 스타일 시트에 쓴 것입니다 :

.hidden-nojs { 
    display: none; 
} 

jQuery가 이미 실행 된 후에 외부 스타일 시트가로드된다고 가정하고 있습니까? 이것은 CSS로 여러 요소를 숨기고 싶기 때문에 다소 짜증이 나서 인라인 CSS를 사용하지 않으려 고합니다.

왜 show()는 인라인 CSS를 사용하여 숨겨진 필드에서만 작동합니까? 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

인라인 요소를 숨기고 표시하려고합니다. jQuery 효과는 블록 유형 요소에서만 작동합니다. jQuery 효과는 인라인 요소 스타일을 조작하므로 버전이 작동하고 클래스 버전이 작동하지 않습니다.

블록 유형 요소는 직사각형입니다. 높이 및/또는 너비를 단순히 애니메이션으로 만들기 때문에 애니메이션을 쉽게 늘리거나 축소 할 수 있습니다.

인라인 요소는 반드시 사각형이 아니므로, 대부분이 인 jQuery 효과가 작동하지 않습니다.

<p>Inside paragraph <span class="foo">This is a test</span> contains text.</p> 
<input type="button" id="bar" value="Toggle"> 

실행 : 당신에게 예를 제공하기 위해

$(function() { 
    $("#bar").click(function() { 
    $("span.foo").toggle(); 
    }); 
}); 

첫 번째 클릭은 숨길 것입니다. 두 번째 블록은 블록으로 바뀝니다 (더 이상 단락에 포함되지 않음). 이것은 jQuery 효과가 실제로 인라인 요소와 작동하지 않는다는 의미입니다.

내부적으로 jQuery 효과는 display: none과 display: block 사이에서 애니메이션과 토글을 결합하여 작동합니다. 이것이 의미하는 바는 표 셀에서 jQuery 효과가 작동하지 않습니다.. 왜? 그들은 display: block이 아니며 실제로는 display: table-cell입니다. 이것을 직접 시험해보고 toggle() 테이블 셀을 몇 번 지나서 어떻게되는지보십시오.

그래서 해결책은 무엇입니까? 애니메이션 효과가없는

$("span.hideme").toggleClass("hidden"); 

이 함께

hidden { display: none; } 

: 인라인 내용에 대한 쉬운 해결책은 클래스를 사용하는 것입니다. 직접 추가 할 수는 있지만 100 %가 아니므로 animate()이 인라인 요소와 잘 작동합니다.

콘텐츠가 블록이 될 수있는 경우 차단하고 모든 문제를 해결할 수 있습니다. 귀하의 경우 <span> 대신 <div>을 사용하거나 <span>에 display: block을 추가하십시오.

Answer 2

이 문제를 재현하지 못했지만 Cletus가 말하는 것과 관련이 없다고 생각합니다. 여기에 애니메이션이 없나요?

스타일을 인라인하는 것은 그것이 인라인 요소라는 사실과 아무 관련이 없습니다. 자작 불통 토글 스크립트와 클래스를 사용할 때도 비슷한 문제가있었습니다. (예 : 광산 등) 많은 순진 구현이 작동하는 방식은 다음과 같이이다 :

가 숨겨져 있다면

function toggle(el) { 
    el.style.display = (el.style.display == 'none') ? '' : 'none'; 
} 

가 숨겨진에 인라인 스타일을 변경합니다. 숨겨진 경우 인라인 스타일을 제거하십시오. 인라인 스타일을 제거하면 스타일 시트에 정의 된 스타일로 되돌아갑니다. 그 이유는 스타일 시트가 표시되지 않는 이유입니다.

내가 말했듯이, jQuery의 show() 함수를 사용하여 오류를 복제했지만 시도 할 수 없었습니다. 필자의 테스트에서 jQuery는 이전의 디스플레이 스타일로 되돌릴만큼 똑똑하기 때문에 문제가 무엇인지 정확히 알지 못하지만 이전에 내가 겪었던 문제와 많이 닮았다.

솔루션에 관한 한, hidden-nojs 클래스를 제거하면됩니다.