1
부트 스트랩 드롭 다운 구성 요소가있는 머리글이 있는데 tabindex를 사용하여 해당 요소로 키보드 탐색을 사용하려고합니다. 다음은 HTML과 간단한 CSS입니다 :드롭 다운에 대해 탭 인덱스 작업을 수행하는 방법은 무엇입니까?
HTML:
<span class="pull-right">
<span class="help-menu dropdown">
<span class="dropdown-toggle" data-toggle="dropdown" role="button">
<span class="help-header" tab-index="0">Help</span>
</span>
<ul class="dropdown-menu pull-right" tabindex="-1" role="menu">
<li tabindex="-1"><a [href]="/help.html" target="_blank">Docs</a></li>
</ul>
</span>
</span>
CSS : 나는 탭을 수행 할 때
다음.help-header{
&:after{
content: "\25BE"; //caret should be displayed!
}
}
.help-menu{
display: inline-block;
cursor: pointer;
background: aqua;
margin-top: 10px;
margin-right: 20px;
}
는 지금 바이올린을 link
입니다 도움말이 포커스를 취득하지 않습니다. 그러나 help-header 클래스에서 tabindex를 제거하고 클래스 pull-right가있는 스팬 또는 클래스 help-menu 및 드롭 다운이있는 스팬에 적용하면 도움말 텍스트가 탭에 포커스를 갖게됩니다. 초점이 맞추어지기는하지만 타격하는 칸이나 공백 또는 아래쪽 화살표에서 드롭 다운을 볼 수 없습니다.
이 작업을 수행하는 방법을 잘 모르겠습니다. 나는 잠시 동안 그것을 알아 내려고 노력했지만 실패했습니다.
여기에 tabindex의 핵심 개념이 누락되었습니다. 누구든지 나를 도와 주거나 올바른 방향으로 나를 가리킬 수 있습니까?
고마워요.
건배.