我为响应式网站创建了一个移动下拉菜单,当您单击某个元素时,它实际上会显示一个隐藏的无序列表。它工作得很好,除了我无法使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()作斗争,所以真的很想一劳永逸地弄清楚它到底是如何工作的,以及我是否在正确的上下文中使用它。谢谢!
最佳答案
您必须自己注意点击次数。并使用$.contains查看单击的内容是否在您的菜单中:
$(document).click(function (ev) {
if (ev.target !== menu.get(0) && !$.contains(menu.get(0), ev.target)) {
menu.slideUp();
}
});
请务必在切换点击处理程序中调用 ev.stopPropagation(),以防止上面的处理程序在事件冒泡时立即关闭菜单。
关于javascript - jQuery Blur() ....它到底是如何工作的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15980965/