javascript - 在焦点和 Tab 键按下时切换元素的类

Question

我目前正在尝试在按下 Tab 键时信息图标都聚焦时切换类。这是codepen我目前的工作。

HTML:

 <i class="fa fa-info-circle" id="disclaimerTooltip" tabindex="0" aria-describedby="myfield_description"></i> 

<span class="test myfield_description" role="tooltip">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 </span>

JQuery:

$('#disclaimerTooltip')
  .bind('focus keypress', function(e){
  var keyCode = e.keyCode || e.which; 
  console.log(keyCode);
  if (keyCode == 9) { 
    $('.test').toggleClass('myfield_description')
  } 

})

当我按 Tab 键进入信息图标时，我得到的键码是 0，而不是 9。

Answer 1

这可以通过 css 而不是 js 来完成 - 我认为在很多情况下它更好，尽管我不特别了解你的情况。

https://codepen.io/anon/pen/BJdxEW

CSS

.myfield_description {
  position: absolute;
  visibility: hidden;
}

i:focus .myfield_description,
i:hover  .myfield_description {
  position: static;
  visibility: visible;
}

html

<i class="fa fa-info-circle" id="disclaimerTooltip" tabindex="0" aria-describedby="myfield_description">
  <span class="test myfield_description" role="tooltip">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  </span>
</i>