Rotan075 Rotan075 - 6 months ago 10
Javascript Question

IE does not show subitems on touch

Hello I got a question regarding showing a sublist on touch. I created a sublist which will be shown if you hover over it, see 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>





Whenever I touch my 1 / 2 buttons within Chrome/Firefox it will show the submenu. But for some reason IE will not. Can anyone tell me why? And how could I solve that?

I did not create any jQuery code. I just use the standard browser functionality. If jQuery code is needed to make this work. I am fine with that.

P.S Keep in mind that I only focus on touch events not mouse clicks.

Answer

Following this article from Microsoft I tested it on a Windows-phone with IE 10/11 mobile.

Adding the aria-haspopup="true" attribute will work for the first click, as it simulates the hover-event.

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

Example

Comments