Question

我为响应式网站创建了一个移动下拉菜单，当您点击某个元素时，该菜单基本上会显示一个隐藏的无序列表。它工作得很好，除了我无法使blur（）函数工作，因此当用户点击页面上除菜单内部以外的任何地方时，它会隐藏菜单。这是一个codepen：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();
    });
});

我过去曾经在模糊（）中挣扎过，所以我真的想一劳永逸地弄清楚它是如何运作的，以及我是否在正确的上下文中使用它。谢谢！

Answer 1

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

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

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

jQuery blur（）....它究竟是如何工作的？

1 个答案: