Question

如果您从iPad http://morsapera.com/rb/HTML-Files/home.html访问此网页，然后点击任何显示下拉列表的菜单项。

我希望当用户点击菜单外的任何位置时隐藏下拉列表。我已经设法部分地完成了它，现在如果你点击菜单下面的图像，它会隐藏下拉列表但是当你点击标题中的任何地方时它仍然存在。

Answer 1

    jQuery(document).on('touchstart', function(event) {
        if ( !jQuery(event.target).closest("#navi ul").length) {
            jQuery("#navi ul").fadeOut();
       }

Answer 2

我已经在触摸设备上使用纯CSS下拉菜单多年来一直在努力。但是，几天前我发现了this wonderful jQuery plugin。

我真的建议删除您的旧想法，将此脚本包含在您的项目中，只需一行代码即可获得幸运：）

$('#navi li:has(ul)').doubleTapToGo();

修改不幸的是，jsFiddle要么停机要么维持（补丁周二）。我测试了最多4个级别的jQuery插件，它运行得很完美!!!!

这是一大堆代码，但正如我所说，jsFiddle暂时不起作用。

<head> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="doubletaptogo.js"></script> <script> $(document).ready(function() { console.log('ready'); $('li:has(ul)').doubleTapToGo();}); </script> <style> * { margin:0px; padding:0px; } body * { display:block; } ul li { width:200px; height:100px; float:left; position:relative; background-color:red; } ul li ul { top:100px; left:0px; display:none; position:absolute; } ul li:hover > ul { display:block; } ul li ul li { position:relative; background-color:green; } ul li ul li ul { top:0px; left:200px; width:10000px; } ul li ul li ul li { float:left; position:relative; background-color:blue; } ul li ul li ul li ul { top:100px; left:0px; width:200px; } ul li ul li ul li ul li { background-color:yellow; } ul li ul li ul li:hover > ul { display:block; } </style> </head> <body> <ul> <li> test 1 </li> <li> test 1 <ul> <li> test 2.1 <ul> <li> test 2.1 </li> <li> test 3.2 </li> </ul> </li> <li> test 2.2 <ul> <li> test 3.1 </li> <li> test 3.2 <ul> <li> test 3.1 </li> <li> test 3.2 </li> </ul> </li> </ul> </li> </ul> </li> </ul> </body>

Answer 3

将它放在菜单的点击处理程序中：

event.stopPropagation();

然后把它放在你的init函数中或者我想的任何地方：

$(document).on('click', function(){
  //REMOVE CLASS THAT MAKES MENU SHOW OR WHATEVER
});

iPad jQuery菜单，点击外面的任何地方隐藏下拉列表

3 个答案: