如何在导航栏上按 Tab 键时触发 JQuery 下拉导航<li>？

Question

我有一个标准的导航栏，鼠标悬停可以有效地下拉我的导航栏列表项。我还想为任何使用键盘的人提供相同的功能，这些人在浏览我的内容时使用我的网站时可能会有残疾。有没有什么我可以额外使用的东西来提供这个导航栏，以便在选项卡时导航？我试过焦点法，但我一定遗漏了什么。。谢谢

以下是我的代码片段：

 $(document).ready(function() {
   $('.dropdown').hover(
     function() {
       $(this).children('.sub-menu').slideDown(200);
     },
     function() {
       $(this).children('.sub-menu').slideUp(200);
     }
   );
 }); // end ready

.navigation {
  width: 100%;
  height: 70px;
  background-color: #f04861;
  position: absolute;
  z-index: 3;
}
#cssmenu {
  position: absolute;
  z-index: 3;
  font-family: "Bebas Neue Bold", Arial, Sans-Serif;
}
#cssmenu ul {
  width: 1000px;
}
#cssmenu ul li {
  font-size: 1.0em;
  display: inline-block;
  position: relative;
  width: 120px;
  background: url(images/navbutton.png);
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 60px;
  height: 45px;
  margin-top: 15px;
  -moz-box-shadow: 3px 0px 35px #000000;
  -webkit-box-shadow: 3px 0px 35px #000000;
  box-shadow: 3px 0px 35px #000000;
  padding-top: 0px;
  border: 0;
}
#cssmenu ul li a {
  display: block;
  padding: 12px;
  width: 120px;
  text-align: center;
  font-weight: bold;
  float: left;
  color: white;
  font-size: 1.2em;
  text-decoration: none;
  height: 45px;
}
#cssmenu ul li.lrglink a {
  display: block;
  padding: 4px 9px 4px 9px;
  width: 115px;
  text-align: center;
  font-weight: bold;
  float: left;
  color: white;
  font-size: 1.2em;
  text-decoration: none;
  height: 45px;
}
/* sub navigation */
#cssmenu li ul {
  position: absolute;
  background: #FFF;
  top: 45px;
  width: 180px;
  height: auto;
  -webkit-box-shadow: 2px 12px 34px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 2px 12px 34px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 2px 12px 34px 0px rgba(0, 0, 0, 0.35);
}
#cssmenu ul li.lrglink ul {
  position: absolute;
  background: #FFF;
  top: 45px;
  width: 180px;
  height: auto;
  -webkit-box-shadow: 2px 12px 34px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 2px 12px 34px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 2px 12px 34px 0px rgba(0, 0, 0, 0.35);
}
#cssmenu li li {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: .5 em;
  color: Black;
  margin: 0px 1px 0px 1px;
  background: #FFF;
  height: 30px;
  width: 100%;
  top: 0px;
  padding: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#cssmenu ul li.lrglink ul li {
  font-size: .5 em;
  margin: 0px 1px 0px 1px;
  background: #FFF;
  height: 30px;
  width: 100%;
  top: 0px;
  padding: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
#cssmenu li li ul {
  position: absolute;
  color: Black;
  top: 0;
  padding-top: 5px;
  left: 180px;
  /* make this equal to the width of the sub nav above */
  margin: 0;
}
#cssmenu li.lrglink li ul {
  position: absolute;
  color: Black;
  top: 0;
  left: 180px;
  /* make this equal to the width of the sub nav above */
  margin: 0;
}
/* style sub level links */
#cssmenu li li a {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: .9em;
  font-weight: lighter;
  padding: 5px 2px 3px 3px;
  color: Black;
  width: 180px;
  height: 30px;
  text-align: left;
}
#cssmenu li.lrglink li ul a {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: .9em;
  font-weight: lighter;
  color: Black;
  width: 180px;
  height: 30px;
  top: 0px;
  padding: 5px 10px 5px 10px;
  margin: 0px;
  text-align: left;
}
#cssmenu li li ul {
  height: 30px;
  padding: 0px;
  margin: 0px;
  width: 160px;
  position: relative;
  z-index: 2000;
}
#cssmenu li.lrglink li a {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: .9em;
  font-weight: lighter;
  color: Black;
  width: 180px;
  height: 30px;
  text-align: left;
}
#cssmenu li li:last-child a {
  border-bottom: none;
  width: 180px;
  height: 30px;
}
/* show arrows for dropdowns */
#cssmenu li.dropdown > a {
  background-image: url('/css/FY17Home/images/arrow-down.png');
  background-position: right 18px;
  padding-right: 5px;
  background-repeat: no-repeat;
  width: 115px;
}
#cssmenu li li.dropdown > a {
  background-image: url('/css/FY17Home/images/arrow-right.png');
  background-position: right 10px;
  background-position: center right;
  background-repeat: no-repeat;
  padding-right: 10px;
  width: 180px;
}
/* hide sub menu links */
ul.sub-menu {
  display: none;
  height: 30px;
}
#cssmenu li li a:hover {
  color: White;
  background-color: #5289ba;
}
#cssmenu li.lrglink li a:hover {
  color: White;
  background-color: #5289ba;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navigation">
  <div id='cssmenu'>
    <ul>
      <li><a href='#'>Home</a>
      </li>
      <li class="dropdown"><a href='#'>Item 1</a>
        <!-- sub navigation links here -->
        <ul class="sub-menu">
          <li style="height:40px;"><a href="#" style="height:40px;">Item 2</a>
          </li>
          <li><a href="#">Item 3</a>
          </li>
          <li><a href="#">Item 4</a>
          </li>
          <li><a href="#">Item 5</a>
          </li>
          <li style="height:40px;"><a href="#" style="height:40px;">Item 6</a>
          </li>
          <li><a href="#">Item 7</a>
          </li>
          <li><a href="#">Item 8</a>
          </li>
          <li><a href="#">Item 9</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Answer 1

您是否正确调用了焦点方法？

https://learn.jquery.com/events/event-basics/

试试这样的东西也许

// Using .one() to bind several events
$( "input[id]" ).one( "focus mouseover keydown", firstEvent);
function firstEvent( eventObject ) {
    console.log( "A " + eventObject.type + " event occurred for the first time on the input with id " + this.id );
}