Jquery菜单Anchor onBlur事件禁用Div次锚

Question

我是JQuery开发的新手。当我试图为我的网站定制菜单时，我面临着onblur事件的问题。有人能帮我解决这个问题吗。

请找JS小提琴JS Fiddle

$(document).ready(function () {
    $('#showmenu').click(function (e) {
        e.preventDefault();
        this.focus();
        $('#serviceMenu').slideToggle("fast");
        $('#Contact').hide();
    });

    $('#showmenu').blur(function (e) {
        $('#serviceMenu').hide();
    });
});

问题是显示/隐藏div机制是基于<a>标记的。在单击<a>时，菜单会切换得很好。当用户单击菜单和出现的div之外的任何位置时，我还希望菜单切换。在小提琴中，我为锚添加了onblur()事件，即使我的子链接在div内触发主锚的onblur()事件，并隐藏菜单。我试图阻止event.propagation()，但这不适合我。

Answer 1

这里的问题是，调用了模糊事件，在单击a#serviceMenu之前，您还应该了解事件传播的工作原理：直接和委托事件 i更新了您的小提琴(有一些注释)：http://jsfiddle.net/M4LJh/7/。

$(document).ready(function () {
    $('#showmenu').on('click', function (e) {
        this.focus();
        $('#serviceMenu').slideToggle("fast");
        $('#Contact').hide();
        return false;
    });

    // prevent clickEvent to bubble up to #showmenu
    $('#serviceMenu a').on('click', function(e){e.stopPropagation();});

    // hide #serviceMenu on bodyClick
    //    - anywhere but an element with propagation stopped event
    $('body').on('click', function (e) {
        $('#serviceMenu').hide();
        return false; // e.stopPropagtaion(); + e.preventDefault();
    });
});