0

我正在开发一个需要完全由键盘控制的应用程序，到目前为止一切都很好，但是当使用 ENTER 键时，我无法使 JQuery UI 菜单小部件工作。

从文档来看，似乎没有具体的方法可以使这项工作，所以我在列表元素上使用“onclick”

  <li onclick="alert('Books Action')"><div>Books</div></li>

这是一个 jsfiddle ( https://jsfiddle.net/djbh6r82/ )，其中包含 JQuery UI 文档中的示例和第一个菜单项上的警报 -> 当我单击它时它工作正常，但使用“ENTER”它只会带给我回到开始（专注于菜单不会丢失）

$(function() {
  $("#menu").menu();
});
.ui-menu {
  width: 150px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<ul id="menu">
  <li class="ui-state-disabled">
    <div>Toys (n/a)</div>
  </li>
  <li onclick="alert('Books Action')">
    <div>Books</div>
  </li>
  <li>
    <div>Clothing</div>
  </li>
  <li>
    <div>Electronics</div>
    <ul>
      <li class="ui-state-disabled">
        <div>Home Entertainment</div>
      </li>
      <li>
        <div>Car Hifi</div>
      </li>
      <li>
        <div>Utilities</div>
      </li>
    </ul>
  </li>
  <li>
    <div>Movies</div>
  </li>
  <li>
    <div>Music</div>
    <ul>
      <li>
        <div>Rock</div>
        <ul>
          <li>
            <div>Alternative</div>
          </li>
          <li>
            <div>Classic</div>
          </li>
        </ul>
      </li>
      <li>
        <div>Jazz</div>
        <ul>
          <li>
            <div>Freejazz</div>
          </li>
          <li>
            <div>Big Band</div>
          </li>
          <li>
            <div>Modern</div>
          </li>
        </ul>
      </li>
      <li>
        <div>Pop</div>
      </li>
    </ul>
  </li>
  <li class="ui-state-disabled">
    <div>Specials (n/a)</div>
  </li>
</ul>

我做错了吗？我尝试了不同的东西（<a href='#' onclick="xxx"></a>而不是div，onclick div而不是ul）但似乎没有任何效果

4

1 回答 1

0

查看 API 文档时，您将在https://api.jqueryui.com/menu/下看到以下详细信息：

键盘交互

  • ENTER/SPACE：调用焦点菜单项的操作，可能是打开子菜单。
  • UP：将焦点移至上一个菜单项。
  • DOWN：将焦点移至下一个菜单项。
  • RIGHT：打开子菜单（如果有）。
  • LEFT：关闭当前子菜单并将焦点移至父菜单项。如果不在子菜单中，则什么也不做。
  • ESCAPE：关闭当前子菜单并将焦点移至父菜单项。如果不在子菜单中，则什么也不做。

键入一个字母会将焦点移至标题以该字符开头的第一个项目。通过匹配的项目重复相同的字符循环。在一秒计时器内键入更多字符与这些字符匹配。

禁用的项目可以接收键盘焦点，但不允许任何其他交互。

因此，Enter已经参与并将触发select菜单的事件。然后，您将希望在select回调中执行一些操作。

$(function() {
  $("#menu").menu({
    select: function(e, ui) {
      console.log(ui.item.text().trim(), "Selected");
    }
  }).focus();
});
.ui-menu {
  width: 150px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<ul id="menu">
  <li class="ui-state-disabled">
    <div>Toys (n/a)</div>
  </li>
  <li>
    <div>Books</div>
  </li>
  <li>
    <div>Clothing</div>
  </li>
  <li>
    <div>Electronics</div>
    <ul>
      <li class="ui-state-disabled">
        <div>Home Entertainment</div>
      </li>
      <li>
        <div>Car Hifi</div>
      </li>
      <li>
        <div>Utilities</div>
      </li>
    </ul>
  </li>
  <li>
    <div>Movies</div>
  </li>
  <li>
    <div>Music</div>
    <ul>
      <li>
        <div>Rock</div>
        <ul>
          <li>
            <div>Alternative</div>
          </li>
          <li>
            <div>Classic</div>
          </li>
        </ul>
      </li>
      <li>
        <div>Jazz</div>
        <ul>
          <li>
            <div>Freejazz</div>
          </li>
          <li>
            <div>Big Band</div>
          </li>
          <li>
            <div>Modern</div>
          </li>
        </ul>
      </li>
      <li>
        <div>Pop</div>
      </li>
    </ul>
  </li>
  <li class="ui-state-disabled">
    <div>Specials (n/a)</div>
  </li>
</ul>

预先提供它focus允许它已经被调用。

于 2022-01-03T21:54:08.883 回答