jQuery模糊(). .它到底是怎么工作的

jQuery blur()....How exactly does it work?

本文关键字:工作 模糊 jQuery      更新时间:2023-09-26

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

你必须自己注意点击。并使用$。包含查看被点击的内容是否在菜单中:

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

只要确保在你的toggle click处理程序中调用ev.stopPropagation(),以防止上面的处理程序在事件冒泡时立即关闭菜单