Question

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

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

每当我触摸 Chrome / Firefox中的我的1/2按钮时，它都会显示子菜单。但出于某种原因IE不会。谁能告诉我为什么？我怎么能解决这个问题？

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

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

Answer 1

在微软的this文章之后，我在带有IE 10/11 mobile的Windows手机上进行了测试。

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

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

Example

Answer 2

您需要确保IE在标准模式下运行 - 输入如下文档类型：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

参考documentation

相邻的兄弟选择器（+登录css）：
1，需要Windows Internet Explorer 7或更高版本。

2，组合器仅在符合标准的模式下启用（严格！DOCTYPE）。

IE（移动）在触摸时不显示子项

2 个答案: