jQuery 平板电脑悬停在顶级链接菜单项上

Question

我有一个用于网站的列表项标题导航，没什么疯狂的。但是顶级链接也有一个悬停状态，可以打开子菜单，我不知道如何让它在平板电脑上正常工作。

当我简单地使用 jQuery 悬停脚本时，顶级导航项会单击而无需先打开子菜单。

当我尝试添加 touchstart 代码时，菜单会打开，但平板电脑、顶级或子菜单上的链接都没有点击。我点击一个链接，唯一发生的事情就是菜单关闭。

理想情况下，平板电脑第一次点击顶级菜单项将打开子菜单，第二次点击顶级菜单项将充当指向下一个网页的链接（就像在子菜单中第一次点击子菜单项一样）开了）。如果用户不想点击链接而只想查看打开的子菜单选项，不确定如何关闭菜单。

这是我的 HTML，去掉了一些无关的东西......

<div id="header-nav">
<ul>
<li><a href="webpage1.html">Webpage 1</a></li>
<li><a href="webpage2.html">Webpage 2</a>
    <ul>
        <li><a href="webpage2a.html">Webpage 2a</a></li>
        <li><a href="webpage2b.html">Webpage 2b</a></li>
        <li><a href="webpage2c.html">Webpage 2c</a></li>
        <li><a href="webpage2d.html">Webpage 2d</a></li>
    </ul>
</li>
</ul>
</div>

基本 CSS...

#header-nav ul {
    display: inline-block;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
#header-nav ul li ul {
    display: none;
    background: #fff;
}
#header-nav ul li.active ul {
    display: block;
    position: absolute;
    z-index: 15;
    top: 42px;
    left: 0;
}

和 JS，带有 touchstart 脚本...

$('#header-nav ul li').hover(function() {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
},
  function() {
    $(this).removeClass('active');
});
$('#header-nav ul li').on('touchstart', function(e) {
    'use strict'; 
    var listItem = $(this); 
    if (listItem.hasClass('active')) {
        $(listItem).removeClass('active');
        return true;
    } else {
        listItem.addClass('active');
        $('#header-nav ul li').not(this).removeClass('active');
        e.preventDefault();
        return false; 
    }
});
$('body').on('touchstart', function(e) {
    'use strict'; 
    //var listItem = $(this); 
    if ($('#header-nav ul li').hasClass('active')) {
        $('#header-nav ul li').removeClass('active');
        return true;
    }
});

我已经尝试了这两个 touchstart 功能，一个或另一个，只有第一个悬停功能。我要么在第一次触摸顶级菜单项时得到点击，要么除了打开菜单之外根本没有点击。

或者，我将此作为悬停功能，它会在鼠标移出时产生延迟，但我使用哪个版本似乎并不重要...

var hoverTimeout;
$('#header-nav ul li').hover(function() {
    clearTimeout(hoverTimeout);
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
},
  function() {
    var $self = $(this);
    hoverTimeout = setTimeout(function() {
        $self.removeClass('active');
    }, 500);
});

非常感谢任何和所有帮助！我对此感到困惑，可能误解了一些简单的事情。

Answer 1

看看这个http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly 忽略响应部分，他提供的插件看起来可以解决你的问题。