javascript - jQuery Blur() ....它到底是如何工作的？

Question

我为响应式网站创建了一个移动下拉菜单，当您单击某个元素时，它实际上会显示一个隐藏的无序列表。它工作得很好，除了我无法使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()作斗争，所以真的很想一劳永逸地弄清楚它到底是如何工作的，以及我是否在正确的上下文中使用它。谢谢!

Answer 1

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

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

请务必在切换点击处理程序中调用 ev.stopPropagation()，以防止上面的处理程序在事件冒泡时立即关闭菜单。