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

如果您从iPad http://morsapera.com/rb/HTML-Files/home.html访问此网页并点击任何菜单项，它将显示下拉菜单。iPad jQuery菜单，点击外面的任何地方以隐藏下拉菜单

我希望下拉菜单隐藏在用户点击菜单外的任何地方。我已经设法部分完成，现在如果单击菜单下方的图像，它将隐藏下拉菜单，但当您单击标题中的任意位置时，它仍然保留。

2013-08-05 Sushi

我一直在努力像在触摸设备上的纯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>

来源

2013-08-05 22:37:12

我会用它但我需要3级菜单，而这个插件只有2级。感谢您的建议。我确实研究过这个。 – Sushi

请检查并测试我的代码。它的工作原理和我测试了4级 –

把这个在你的点击处理程序菜单：

event.stopPropagation();

那么把它放进你的初始化函数或随便找个地方，我想：

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

来源

2013-08-05 22:39:05 carter

感谢您的答案，但这种解决方案并没有为我工作。 – Sushi

发布jsfiddle或更多代码。 – carter

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

来源

2014-02-24 20:10:49 cpk

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

回答

相关问题