Javascript jQuery blur（）…它到底是如何工作的？

我为一个响应性网站创建了一个移动下拉菜单，当你点击某个元素时，它会显示一个隐藏的无序列表。它工作得很好，只是我无法让blur（）函数工作，因此当用户单击页面上除菜单内以外的任何位置时，它会隐藏菜单。这是一个密码笔：

我的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.stopperPagation（），以防止上面的处理程序在事件冒泡时立即关闭菜单。

您必须自己观察单击。并用于查看单击的内容是否在您的菜单中：

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

---

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

模糊只发生在可以获得焦点的元素上，例如输入元素。这就是我的问题：）。当您“单击关闭”时，是否还有另一个类似的函数可用于常规块元素？

$（文档）.on（'click'，函数（e）{if（$（e.target）.closest（'header'）。length==0&&e.target.nodeName！='header'）$（菜单）.slideToggle（））还有很多其他方法。你可以使用这个解决方案。它处理每次点击文档并检查他的目标。天哪，真快！我只是在看，并试图找出如何实现类似的东西，你击中了要害。把它贴出来作为答案！谢谢：）模糊只发生在可以获得焦点的元素上，比如输入元素。这就是我的问题：）。当您“单击关闭”时，是否还有另一个类似的函数可用于常规块元素？
$（文档）.on（'click'，函数（e）{if（$（e.target）.closest（'header'）。length==0&&e.target.nodeName！='header'）$（菜单）.slideToggle（））还有很多其他方法。你可以使用这个解决方案。它处理每次点击文档并检查他的目标。天哪，真快！我只是在看，并试图找出如何实现类似的东西，你击中了要害。把它贴出来作为答案！谢谢你的回答。我可以看到它是如何工作的，但我想做一些调整，我正在努力弄清楚。如果您查看我的测试站点：并向下调整浏览器的大小，直到出现移动导航，您会注意到单击菜单图标会立即上下切换菜单。所以它不能正常工作，因为菜单在你点击它之前不会一直打开，就像我在寻找一样。有什么想法吗？是的。主体单击处理程序在菜单单击处理程序（事件冒泡）后触发。仅在菜单切换按钮单击处理程序（打开菜单时）中添加正文单击处理程序。当你关闭菜单时，移除处理程序。好的，我知道它在菜单点击处理程序之后触发，但是把它放在它之前也不能解决问题。我不确定我在这里哪里迷路了，但我是如何实现它的：我将在哪里移动body click处理程序？实际上最简单的方法是停止pull事件处理程序中的事件传播。我更新了您的示例（并将单击绑定到
文档
而不是
正文
）：@TrevanHetzel，我认为iPhone作为移动设备使用了其他事件。尝试使用
touchstart
事件<代码>$（文档）。在（'touchstart click'，func…
谢谢你的回答。我可以看到这是如何工作的，但我想做一些调整，我正在努力弄清楚。如果你看看我的测试网站：并调整浏览器的大小，直到出现移动导航，你会注意到单击菜单图标会立即上下切换菜单。因此这不是exa很好地工作，因为菜单不会像我一样一直打开直到你点击它。有什么想法吗？是的。主体点击处理程序在菜单点击处理程序（事件冒泡）后启动。只在菜单切换按钮点击处理程序中添加主体点击处理程序（当你打开菜单时）。并在关闭菜单时移除处理程序。好的，我知道它在菜单单击处理程序之后触发，但将其放在它之前也不能解决问题。我不确定我在这里哪里迷路了，但我是如何实现它的：我将主体单击处理程序移动到哪里？实际上最简单的方法是停止事件在中的传播您的pull事件处理程序。我更新了您的示例（并将单击绑定到
文档而不是
正文
）：@TrevanHetzel，我认为iPhone作为移动设备使用其他事件。尝试使用
touchstart
事件。
$（文档）。on（'touchstart click'，func…