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菜單，點擊外面的任何地方以隱藏下拉菜單

回答

相關問題