CSS3 만 사용하여 요소 표시/숨기기 - 왜 작동하지 않습니까?

저는 iPhone/iPod에서 Safari를 대상으로하는 오프라인 웹 앱을 개발 중입니다. 주로 재미를 위해서뿐만 아니라 jQuery 이벤트 바인딩에 대한 의존성을 줄이기위한 방법으로 (그리고 UI 반응성을 높이기 위해) 기본적인 표시/숨기기 기능으로 CSS3을 사용하려고 시도했습니다.CSS3 만 사용하여 요소 표시/숨기기 - 왜 작동하지 않습니까?

다음 코드는 파이어 폭스 3.6.3에서가 아니라 최신 사파리에서 데스크톱과 모바일 모두에서 작동하는 간단한 예입니다 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <style type="text/css"> 
    input:not(:checked) ~ select { display: none; } 
    input:checked ~ select { display: inline; } 
    </style> 
</head> 
<body> 
    <input type="checkbox" id="cb" /> <label for="cb">Toggle select</label> 
    <select id="sel"><option value="">Select Box</option></select> 
</body> 
</html>

난 정말이 일 것으로 예상되지

, 그러나 나는이었다 적어도 파이어 폭스에서는 그렇다는 것을 알게되었다. Safari에서 작동하지 않는 이유는 무엇입니까? 웹 페이지에있는 <select>은 처음에는 숨겨져 있습니다. 올바른 것이고 웹 관리자는 체크 박스를 클릭 할 때마다 적절한 표시 값이 설정되지만 요소가 표시되지 않는다고 알려줍니다.

<label> 태그 안에 <a href="#sel> 태그로 된 텍스트를 감싸고 select:target { display: inline; } 규칙을 사용하여 비슷한 성공적인 실험을했는데, 그것이 궁극적으로 원하는 동작이 아닙니다.

너무 많이 도달합니까? 이런 종류의 것들이 자바 스크립트에 가장 좋은가요?

출처

2010-04-15 Jake Krohn

나는 이것이 당신이 js에서 쉽게 할 수있는 일을하기 위해 열심히 노력하고 있다고 말하고 싶습니다. UI 반응성 이득은 아마도 이런 종류의 일을 적절하게 작동 시키려고 노력하는 당신의 정신을 보장하기에 충분하지 않을 것입니다. 시간, 특히 당신이 더 복잡한 것을 얻는 것을 시도하는 경우에 : D – Jeriko

나는이보고 너무 오래 보낸 적이없는,하지만 당신은 그것을 조금 단순화 경우는 원칙적으로 작업을 수행 : 당신의 예에서

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <style type="text/css"> 
    input:not(:checked) + select { 
     display: none; 
    } 
    input:checked + select { 
     display: inline; 
    } 
    </style> 
</head> 
<body> 
    <input type="checkbox" id="cb" /> 
    <select id="sel"><option value="">Select Box</option></select> 
</body> 
</html>

을 나는 그렇지 형제 선택기 생각 working : the : checked와 : not (: checked)는 잘 동작하는 것 같습니다. 위의 예제는 Safari 4.0.4에서 작동합니다.

그러나 나는 이것이 공정한 단계라고 제안합니다. Ulitmately CSS는 프리젠 테이션 기술이며,이 접근법을 채택함으로써 프레젠테이션을 기능적 관심사와 혼합합니다 ... 개인적으로 저는 자바 스크립트로 이것을 할 것입니다.

출처

2010-04-15 16:16:48 dannywartnaby

어, 어때요? 형제 선택자 ('~')는 페이지가 처음로드 될 때 작동하지만 후속 이벤트에는 작동하지 않습니다. 라벨을 잃어 버리는 것이지만, 이것을 사용하기로 결정하면 주위를 둘러 볼 수 있습니다. 감사합니다. –

"way around", 나는'label' 태그를 지우지 만 텍스트를 안에 넣는 것과 같은 일을합니다. 이 익명의 인라인 상자를 클릭 할 수 있다면 멋질 것입니다 만, 그게'label' 태그를위한 것입니다. :) –

CSS3 만 사용하여 요소 표시/숨기기 - 왜 작동하지 않습니까?

답변

관련 문제