iPad的典型CSS菜单下拉悬浮问题

Question

We're having a common issue with hover states and CSS menus on the iPad. Because it doesn't recognize hover states it's not allowing a selection.

We've tried most of the common workarounds like onClick="return true" and using jQuery to create a dynamic hover class to replicate :hover and a few others, which I've removed now to clean the code a bit. I'm sure we're missing something that should be obvious.

Any help pointing me in the right direction on this would be greatly appreciated.

Link: iar.suissamesser.com

Answer 1

You should look at the example here http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/

It's pretty straight forward from there. Good Luck,

Answer 2

I assume you are talking about the menu, correct? What I do in this case, is add another line to my css :hover selector. The idea is this, on click, add a class to the #nav like ' btn1 . This would also require you to add a class to your list-items.
CSS

#nav li:hover > ul,
#nav.btn1 li.btn1 > ul {
    display: block;
}

HTML

<ul class="clearfix btn1" id="nav">
  <li class="btn1"><a href="http://iar.suissamesser.com/about-us/campus">ABOUT US</a><br />
    <ul>
      <li><a href="http://iar.suissamesser.com/about-us/campus">Campus</a></li>
      <li><a href="http://iar.suissamesser.com/about-us/history-mission">History &amp; Mission</a></li>
    </ul>
  </li>
  <li class="btn2"><a href="http://iar.suissamesser.com/parents/accreditation-and-licenses" >PARENTS</a><br />
    <ul>
      <li><a href="http://iar.suissamesser.com/parents/accreditation-and-licenses">Accreditation and Licenses</a></li>

JS

$("#nav > li > a").on("click", toggleNav);
var toggleNav = function(evt){
  var clicked = $(this).parent().attr('class');
  $("#nav").removeClass("btn1 btn2 btn3 btn4 ...").addClass(clicked);
  evt.preventDefault();
}

Answer 3

Include the below code in a footer file

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) {
e.stopPropagation();
}

Answer 4

this is a late late late response, but.

you dont actually have to use any kind of jquery or code, you just need to confuse or override the ipad logic in the css.

try this in your css

.navigation li ul
{
display:none;
}
.navigation li:hover ul
{
display:block;  
}
.navigation > li:hover
{
background-color:#000;  
}

as i understand, this stops the ipad cascading into the li and you hitting the a href because you did a hover on the li, but, when the sub menu is open, the a becomes the next responder because the li already has a hover state active.

this was discovered by accident.

html would be like this

<ul class="navigation">
<li><a href="http://www.google.com">test link</a>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
<li><a href="#www.google.com">test link</a>
<li><a href="#www.google.com">test link</a>
</ul>