예, :checked
가짜 균열은 all major mobile browsers에서 작동합니다. CSS와
<input class="dropdowninput" type="checkbox" id="dropdownbox1"/>
<div class="dropdownbox">
<label for="dropdownbox1">Open dropdown</label>
<ul class="dropdown">
<li>...</li><li>etc</li>
</ul>
</div>
: 확인란을 선택하면
.dropdowninput, .dropdown {display:none;}
.dropdowninput:checked + .dropdownbox .dropdown {display:block;}
그 방법은, 당신의 드롭 다운 ul
만 표시됩니다 당신이 할 수있는
하는 방법은 다음과 같다. 단점은 드롭 다운을 열 때 사용자가 수동으로 닫을 경우에만 닫힙니다. CSS와
<div class="dropdown">
Open
<ul>
<li>asdf</li>
<li>foo</li>
</ul>
</div>
:
.dropdown ul {display:none;}
.dropdown:hover ul {display:block;}
this 간단한 jsbin 안드로이드에 내 크롬에 나를 위해 작동
당신은 또한 당신이 찾고있는 효과가 아마 인 :hover
를 사용할 수 있습니다.
중첩 된 ul
이 드롭 다운 내에서 아무 것도 클릭하지 않은 채로 계속 올려 놓은 상태에서 "트리거링"레이블 요소가 더 이상 포커스가 맞지 않아서 작동합니다. 또한 모바일 브라우저가 작동하는 방식 때문에 :active
이 작동하지 않을 수도 있지만 정직해야한다는 것을 알지 못합니다.
: 무언가를 만지면 호버가 터치 장치에서 작동합니다. 확인란 아이디어는 천재이지만 수동으로 닫아야한다는 유용성을 좋아하지 않습니다. – David
@David 내 경험에 의하면': hover'는 일반적으로 모바일 브라우저에서도 잘 작동합니다. 나는 모바일 브라우저에서 여러 가지 다른 상황을 경험 한 적이별로 없지만 [MediaWiki 확장 기능] (https://www.mediawiki.org/wiki/Extension:Tabs)을 완성했습니다. 거의 똑같은 아이디어를 사용하고 있으며, 테스트에서': hover'는 모든 안드로이드 브라우저에서 완벽하게 작동하는 것처럼 보였습니다. 안드로이드 브라우저와 돌고래에 대해'checked :'와 함께 몇 가지 작은 "재 렌더링"문제를 겪었습니다. 안드로이드 브라우저와 돌핀은 스타일이 예상대로 부드럽게 재 계산되지 않습니다. – Joeytje50
이 훌륭한 솔루션은 https://developer.mozilla.org/en-US/docs/Web/CSS/ : live 예제를 포함하여 확인되었습니다. –