Question

Microsoft suggests using aria-haspop="true" to simulate hover on touch-enabled devices.

This is also the correct use in the W3 roles model spec.

不包括aria-haspop =＆＃34; true＆＃34;当我点击时，我无法保持子菜单打开，当我按住一下按钮时，它将触发＆＃34;右键单击＆＃34;。

HTML

<ul class="menu">
  <li aria-haspopup="false">
    <a href="#">aria-haspopup="false"</a>
    <ul class="sub-menu">
      <li>Sub Menu Item 1</li>
      <li>Sub Menu Item 2</li>
      <li>Sub Menu Item 3</li>
    </ul>
  </li>
  <li>
    <a href="#">Menu Item 2</a>
  </li>
  <li aria-haspopup="true">
    <a href="#">aria-haspop="true"</a>
    <ul class="sub-menu">
      <li>Sub Menu Item 1</li>
      <li>Sub Menu Item 2</li>
      <li>Sub Menu Item 3</li>
    </ul>
  </li>
</ul>

CSS

.menu > li {
  display: inline-block;
  position: relative;
  background: #1abc9c;
}
.menu > li > a {
  padding: 20px;
  background: #1abc9c;
  display: inline;
  float: left;
}

.menu > li:hover .sub-menu {
  display: block;
  position: absolute;
  background:  #1abc9c;
  top: 50px;
  left: 0;
}
.menu .sub-menu {
  display: none;
}

.menu .sub-menu li {
  padding: 20px;
  width: 140px;
}

让我们尝试让网络变得不那么容易接近。如果不在Windows平台设备上添加咏叹调标签，有没有办法让子菜单工作？最好只使用CSS。 Javascript是可以接受的但不太理想。

Answer 1

在您链接的同一Microsoft指南中，他们建议您使用onclick事件来显示内容。

最佳做法是不使用悬停来隐藏用户可以与之交互的内容。相反，请考虑使用 onclick 事件切换可见性。

当然，挑战在于您的菜单项也是链接，点击链接可能会带您到另一个页面。只有当它们确实是无处可去的死锚时（如在您的示例代码中），使用它们的onclick事件来显示或隐藏子菜单是安全的。

以下是使用onclick显示子菜单而不是使用CSS :hover的示例代码。请注意，我的示例为了简洁起见直接指定处理程序，但更好的做法是使用addEventListener()方法。

＆＃13;

var parentMenuItems = document.querySelectorAll(".menu > li");
var len = parentMenuItems.length;
while (len--) {
  parentMenuItems[len].onclick = showSubMenu;
  parentMenuItems[len].onmouseenter = showSubMenu;
  parentMenuItems[len].onmouseleave = hideSubMenu;
}
function showSubMenu() {
  this.querySelector(".sub-menu").style.display = "block";
}
function hideSubMenu() {
  this.querySelector(".sub-menu").style.display = "none";
}

＆＃13;

.menu > li {
  display: inline-block;
  position: relative;
  background: #1abc9c;
}
.menu > li > a {
  padding: 20px;
  background: #1abc9c;
  display: inline;
  float: left;
}
.menu > li .sub-menu {
  position: absolute;
  background: #1abc9c;
  top: 50px;
  left: 0;
}
.menu .sub-menu {
  display: none;
}
.menu .sub-menu li {
  padding: 20px;
  width: 140px;
}

＆＃13;

<ul class="menu">
  <li aria-haspopup="false">
    <a href="#">aria-haspopup="false"</a>
    <ul class="sub-menu">
      <li>Sub Menu Item 1</li>
      <li>Sub Menu Item 2</li>
      <li>Sub Menu Item 3</li>
    </ul>
  </li>
  <li aria-haspopup="true">
    <a href="#">aria-haspop="true"</a>
    <ul class="sub-menu">
      <li>Sub Menu Item 1</li>
      <li>Sub Menu Item 2</li>
      <li>Sub Menu Item 3</li>
    </ul>
  </li>
</ul>

＆＃13;

在不使用aria-haspop的情况下模拟Windows Surface上的Touch

1 个答案: