如何在移動Safari中創建第二次點擊關閉下拉菜單

我有一個相對簡單的下拉菜單，其中設置了mouseenter和mouseleave事件。菜單效果很好，但是在移動Safari上單擊鏈接觸發菜單'第二次'（菜單打開後）不會關閉它。我嘗試添加一個單擊事件到HTML或正文以觸發關閉菜單，但這似乎不起作用。如何在移動Safari中創建第二次點擊關閉下拉菜單

我的HTML：

<ul> 
<li class="dropdown"><a href="#">Toggle dropdown</a> 
    <ul class="dropdown-menu"> 
     <li>This is my sub menu</li> 
     <li>And another item</li> 
     <li>And one more</li> 
    </ul> 
</li> 
<li><a href="#">Just another link</a></li>

我的CSS（這一點真的很複雜）：

ul.dropdown-menu { display: none; }

我的jQuery：

$(document).on({ mouseenter: function(){ 
     $(this).find('.dropdown-menu').stop(true, true).delay(250).fadeIn(100); 
     $(this).addClass('open'); 
    }, mouseleave: function() { 
     $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut(50); 
     $(this).removeClass('open'); 
    }}, 'ul li.dropdown');

我也扔了這一切了在小提琴中：

http://jsfiddle.net/EtS8E/1/

我還挺ssumed，添加一個click事件給李本身就允許我來觸發接近，但很可惜，這並沒有給我想要的結果無論是。

我一直在谷歌上搜索這個東西好像小時，發現一對夫婦在這裏的相關問題與答案（例如：How to properly handle a 'body' jquery event to close a dropdown），但似乎都不如描述

任何想法來工作？！

來源

2013-03-12 Nathan Pitman

這對任何人都沒有任何幫助，但爲了清晰起見，我會在這裏發佈。最後，我用下面的方法解決了這個問題。

$(document).on({ mouseenter: function(e){ 
     if (!iOSdevice) { 
      $(this).find('.dropdown-menu').stop(true, true).delay(250).fadeIn(100); 
      $(this).addClass('open'); 
     } 
    }, mouseleave: function(e) { 
     if (!iOSdevice) { 
      $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut(50); 
      $(this).removeClass('open'); 
     } 
    }, click: function(e) { 
     e.preventDefault(); // Prevents the default click event 
     if ($(this).hasClass('open')) { 
      $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeOut(50); 
      $(this).removeClass('open'); 
     } else { 
      // Reset all other open dropdowns 
      resetDropDowns(); 
      // Open this dropdown 
      $(this).addClass('open'); 
      $(this).find('.dropdown-menu').stop(true, true).delay(250).fadeIn(100); 
     } 
    }}, 'header nav ul li.dropdown:not(.disabled)');

iOSdevice var根據瀏覽器類型是true/false。

來源

2013-03-12 12:23:44

如何在移動Safari中創建第二次點擊關閉下拉菜單

回答

相關問題