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()事件，也就是讓我的子鏈接在主觸發器中觸發onblur()事件，並隱藏菜單。我試圖阻止event.propagation()，但它不適合我。

Answer 1

這裏的問題是，該模糊事件被稱爲，在你點擊一個＃serviceMenu 你也應該瞭解事件傳播是如何工作的：Direct and delegated events 我更新了小提琴（有一些評論）：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(); 
    }); 
});