Click on any of the elements specified element to hide, how to get div has the focus of the event

Click any non-native elements, designated element hiding

Often encountered in the actual development process, the following questions:
1. The mouse after the drop-down box to display hidden, such as navigation dropdown
2. Click on the drop-down box displays the mouse, click on any other element, drop-down box to hide.
The first method is very easy to implement, but the second method is very headache, for which will introduce two solutions to the second problem.

First, the use of click binding law

---

jQuery code:

$("span").click(function(){
    $("ul").show();
})

$(document).click(function(){
    $("ul").hide();
})
//div为指定的“触发下拉控件”
//如果“触发下拉控件”和指定的显示隐藏元素不是上下级别关系，也需要对显示隐藏元素阻止冒泡
$("div").click(function(){
    return false;
})

html layout:

Drawbacks:

• html document, there are other elements to stop bubbling, then this approach is not fully achieve the desired results.

• Click on any of the elements are required to trigger a hidden div, this approach is very resource consuming.

Idea: If the div can have as focus property as input text box, this problem is not solved?!

Second, how has the focus attribute div

Increase tabindex, modify html as follows:

jQuery worded as follows:

---

$("div").focus(function(){
    $("ul").show();
}).blur(function(){
    $("ul").hide();
})

advantage:

• Small footprint

• Way to achieve easy to understand

• Compatibility