1

我有一个相对简单的下拉菜单，我为它设置了 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 本身添加一个点击事件可以让我触发关闭，但唉，这也没有给我想要的结果。

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

有任何想法吗？:!

4

1 回答 1

0

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

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

于 2013-03-12T12:23:44.090 回答