javascript - IE(移动)不显示触摸子元素

Question

您好，我有一个关于在触摸时显示子列表的问题。我创建了一个子列表，如果你将鼠标悬停在它上面就会显示它，请参阅 demo here :

@import url(//fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700);
 body {
  font-size: 18px;
  line-height: 1.42857143;
  color: #000;
  background-color: #fff;
  font-family: 'Titillium Web', sans-serif;
  margin: 50px;
}
a {
  color: #000;
  text-decoration: none;
  background-color: transparent;
}
.wrapper {
  display: block;
  position: relative;
  float: left;
}
.wrapper a {
  color: #000;
  font-weight: 600;
  line-height: 25px;
  position: relative;
  display: block;
  float: left;
  font-size: 20px;
  padding-right: 9px;
  padding-left: 9px;
  padding-top: 5.5px;
  padding-bottom: 8.5px;
}
.subitems {
  margin: 0;
  padding: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-left: none;
  border-right: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;
  min-width: 160px;
  display: none;
  list-style: none;
  font-size: 18px;
  text-align: left;
  background-color: #245d94;
  border-radius: 0;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.wrapper a:hover + .subitems {
  display: block;
  background-color: #245d94;
}
.wrapper a:hover + .subitems a {
  color: #fff;
  display: block;
}
.subitems > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #fff;
  white-space: nowrap;
}
.subitems:hover {
  display: block;
  color: #fff;
}

<div class="wrapper">
  <a href="#">
    TOUCH ME 1
  </a>
  <div class="subitems">
    <a href="#">ITEM 1.1</a>
    <a href="#">ITEM 1.2</a>
  </div>
</div>
<div class="wrapper">
  <a href="#">
    TOUCH ME 2
  </a>
  <div class="subitems">
    <a href="#">ITEM 2.1</a>
    <a href="#">ITEM 2.2</a>
  </div>
</div>

每当我在 Chrome/Firefox 中触摸我的 1/2 按钮时，它就会显示子菜单。但出于某种原因，IE 不会。谁能告诉我为什么？我该如何解决？

我没有创建任何 jQuery 代码。我只是使用标准的浏览器功能。如果需要 jQuery 代码来完成这项工作。我对此很好。

P.S 请记住，我只关注触摸事件而不是鼠标点击。

Answer 1

正在关注 this来自 Microsoft 的文章 我在装有 IE 10/11 移动版的 Windows 手机上对其进行了测试。

添加 aria-haspopup="true" 属性将适用于第一次点击，因为它模拟了 hover 事件。

<a href="#" aria-haspopup="true">
    TOUCH ME 2
</a>

Example