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 只需忽略响应部分，他提供的插件看起来就像是解决了你的问题。

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

1 个答案: