Question

我们在iPad上有悬停状态和CSS菜单的常见问题。因为它不能识别悬停状态，所以不允许选择。

我们尝试了大多数常见的解决方法，例如onClick="return true"，并使用jQuery创建一个动态悬停类来复制：hover和其他一些，我现在已经删除了一些来清理代码。我确信我们错过了一些显而易见的事情。

非常感谢任何帮助我指出正确方向的帮助。

链接：iar.suissamesser.com

Answer 1

您应该查看此处的示例http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/

从那里开始很直接。祝你好运，

Answer 2

我假设你在谈论菜单，对吗？在这种情况下我做的是在我的css :hover选择器中添加另一行。我们的想法是，点击后，将类添加到#nav，如“btn1。这还需要您在列表项中添加一个类 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

在页脚文件中包含以下代码

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

Answer 4

这是迟到的晚期回应，但是。

你实际上不必使用任何类型的jquery或代码，你只需要混淆或覆盖css中的ipad逻辑。

在你的css中尝试这个

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

据我所知，这会阻止ipad级联到li并且你打了一个href，因为你在li上做了一个悬停，但是，当子菜单打开时，a成为下一个响应者，因为li已经有了悬停状态活跃。

这是偶然发现的。

html会是这样的

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

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

4 个答案: