Question

我有一个相对简单的下拉菜单，我设置了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），但似乎都没有按照描述的方式工作

有什么想法吗？：

Answer 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 var为true / false，具体取决于浏览器类型。

如何在Mobile Safari中进行第二次单击关闭下拉菜单

1 个答案: