如何在 Mobile Safari 中制作第二次单击关闭下拉菜单答案

【问题标题】：How to make 2nd click close dropdown menu in Mobile Safari如何在 Mobile Safari 中制作第二次单击关闭下拉菜单
【发布时间】：2013-03-12 10:20:16
【问题描述】：

我有一个相对简单的下拉菜单，我为其设置了 mouseenter 和 mouseleave 事件。该菜单效果很好，但是在移动 Safari 上单击“第二次”触发菜单的链接（在打开菜单后）不会关闭它。我尝试向 html 或正文添加点击事件以触发关闭菜单，但这似乎不起作用。

我的 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/

我有点认为向 li 本身添加一个点击事件可以让我触发关闭，但遗憾的是，这也没有给我想要的结果。

我已经在谷歌上搜索了几个小时，并在这里找到了几个相关问题的答案（例如：How to properly handle a 'body' jquery event to close a dropdown），但似乎都没有像描述的那样工作

有什么想法吗？ :!

【问题讨论】：

标签： jquery mobile drop-down-menu safari

【解决方案1】：

这可能对任何人都没有任何帮助，但为了清楚起见，我会在这里发布。最后，我使用以下方法解决了问题。

$(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 变量的真/假取决于浏览器类型。

【讨论】：