점진적 향상과 "숨겨진 내용의 플래시"?

JS 및 JS 이외의 사용자에게 유용한 점진적으로 향상된 페이지를 작성하려고합니다. JS 사용자를 위해 처음에는 양식 컨트롤을 숨기고 싶지만 항상 JS가 아닌 사용자에게 표시하십시오.점진적 향상과 "숨겨진 내용의 플래시"?

제 질문은 JS 사용자를 위해 눈에 띄지 않는 "즉시 볼 수있는 숨겨진"콘텐츠 플래시를 만들지 않고이 작업을 수행하는 방법에 관한 것입니다.

예를 들어 JS 버전에서 검색 양식의 일부를 접어서 '추가 옵션을 보려면 여기를 클릭하십시오.'버튼을 표시하고 싶습니다.

$(document).ready(function() { 
    $("#extra-options").hide(); 
    ... 
    $("#show-extra-options").click(function() { 
    $("#extra-options").slideToggle(); 
    }); 
});

이 작동하지만 페이지가로드, 추가 옵션은 500ms 정도 볼 수 있습니다 JS 사용자를 위해, 그들은이 사라지는 것을 의미 다음과 같이 나는이 작업을 수행. 오히려 산만 해.

이 문제를 해결할 수있는 합리적인 방법이 있습니까?

StackOverflow has just suggested this answer :이게 합리적입니까? 죄송합니다. 지금은 중복 질문이지만, 검색 중에 답변을 찾지 못해서이 질문을 내 자신의 언어로 작성할 가치가있는 것으로 파악됩니다.

출처

2013-02-07 Richard

머리에 스크립트 태그에이 추가 : 당신은 또는 자바 스크립트가 있거나없는 사용자를위한 컨텐츠를 숨길 수

.hasJs { display: none; } 
.js .hasJs { display: block; } 
.js .noJs { display: none; }

$('html').addClass('js');

는 그런 다음 요소를 표시하고 숨길 것을 사용할 수 있습니다 :

<div class="hasJs">Some content only visible for JS users.</div> 
<div class="noJs">Some content only visible for non-JS users.</div>

클래스와 CSS가 머리에 있기 때문에 요소는 이미 s 그들은 시체가 파싱 될 때 실존하게 될 때 틸팅 (tyled)된다.

데모 : http://jsfiddle.net/Guffa/YuAyr/

이것은 당신이에 연결된 질문에 대한 첫 번째 대답에있는 것과 비슷한 방식이지만, 당신이 html 요소에 클래스를 추가 할 필요가 없기 때문에이 다소 청소기 코드는 단순히 클래스를 제거하는 대신 추가합니다.

출처

2013-02-07 09:25:39 Guffa

점진적 향상과 "숨겨진 내용의 플래시"?

답변

관련 문제