键盘导航在多级Boostrap下拉菜单中无法正常工作

Question

在w3schools.com上，我找到了这个示例，只是为了使其简单：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

当我使用键盘导航时，效果很好。但是，当我添加一些其他级别时-我无法达到下一个级别：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <!-- next level -->
          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1-2<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Page 1-2A</a></li>
              <li><a href="#">Page 1-2B</a></li>
              <li><a href="#">Page 1-2C</a></li>
            </ul>
          </li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

在我的项目中，我尝试编写一个用于下拉菜单的jquery-keyboard处理程序，但是子级别仍然无法切换。