1

我为响应式网站创建了一个移动下拉菜单，当您单击某个元素时，它实质上会显示一个隐藏的无序列表。它工作得很好，除了我无法让 blur() 函数工作，因此当用户单击页面上除菜单内部以外的任何位置时，它会隐藏菜单。这是一个代码笔：http: //codepen.io/trevanhetzel/pen/wIrkH

我的 javascript 看起来像这样：

$(function() {
    var pull = $('#pull');
    menu = $('header ul');

    $(pull).on('click', function(e) {
        e.preventDefault();
        $('.close-menu').toggle();
        $('.mobi-nav span').toggle();
        menu.slideToggle(250);
    });

    $(menu).blur(function() {
        $(this).slideToggle();
    });
});

我过去一直在与 blur() 作斗争，所以真的很想一劳永逸地弄清楚它是如何工作的，以及我是否在这里正确的上下文中使用它。谢谢！

4

1 回答 1

1

您必须自己注意点击。并使用$.contains查看单击的内容是否在您的菜单中：

$(document).click(function (ev) {
    if (ev.target !== menu.get(0) && !$.contains(menu.get(0), ev.target)) {
       menu.slideUp();
    }
});

只需确保在切换单击处理程序中调用 ev.stopPropagation() 以防止上面的处理程序在事件冒泡时立即关闭菜单。

于 2013-04-12T21:23:07.580 回答