Question

我正在尝试创建一个菜单按钮，当它悬停时，会在桌面上显示一组下拉链接。但是，很明显用户可以将鼠标悬停在手机上等等，所以一直试图弄清楚如何让按钮显示点击菜单。

到目前为止，我已经设法在鼠标输入和删除时使用jquery添加和删除.show-nav类。我尝试添加以下代码块，但它显然也会影响桌面，如果有人点击按钮（因为类在悬停上应用，然后使用点击永久添加和删除），菜单会变得棘手。

感谢cesare除了iOS上的Chrome之外，一切正常。 djtwigg的解决方案是在Chrome中运行但不是safari。是否可以将两种解决方案合并在一起？

<nav>
    <ul>
        <li id="nav-button">
            <a id="nav-click" href="#">Menu <i class="fa fa-bars"></i></a>
            <ul class="sub-nav">
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
            </ul>
        </li>
    </ul>
</nav>

var flag = false;
container.bind('touchstart', function(){
if (!flag) {
   flag = true;
   setTimeout(function(){ flag = false; }, 260);
   list.toggleClass('show-nav');
}
return false
});

container.hover(function(){
   list.addClass('show-nav');
}, function(){
   list.removeClass('show-nav');    
});
});

Answer 1

您可以将“悬停”用于桌面并将“touchstart”绑定到移动设备。

var flag = false;
container.bind('touchstart', function(){
if (!flag) {
   flag = true;
   setTimeout(function(){ flag = false; }, 260);
   list.toggleClass('show-nav');
}
return false
});

container.hover(function(){
   list.addClass('show-nav');
}, function(){
   list.removeClass('show-nav');    
});

试试这个小提琴： https://jsfiddle.net/62cvsvvc/6/

此解决方案的灵感来自于这个问题： How to bind 'touchstart' and 'click' events but not respond to both?

修改我检查了我的服务器并正常工作。我想iOS的这个问题与jsFiddle环境有关。

请试试： http://cesare.heliohost.org/test/

Answer 2

使用def get_number(): while True: try: n = int(raw_input('Please enter a 6 digit number ')) if 100000 <= n < 1000000: return n except ValueError: continue if __name__ == '__main__': print get_number()事件：

touchstart

Answer 3

可以通过检查事件是触摸还是单击来执行此操作。我找到了一个帮助：Gist of plugin

的插件

只需点击一下即可点击该按钮，然后点击该按钮即可切换菜单。使用preventDefault（），如小提琴中所示。在mouseenter和mouseleave上添加或删除类，检查它是否是鼠标而不是触摸。

return plus_minus_helper<std::plus<>>(op1, op2);

这是iPhone上的一个工作示例的小提琴：Fiddle

通过悬停在桌面上打开菜单，点击手机

3 个答案: