要素のいずれかをクリックして非表示にする要素を指定し、DIVを取得する方法をイベントのフォーカスを持っています

任意の非ネイティブ要素をクリックして、指定された要素の隠蔽

多くの場合、実際の開発過程で、以下の質問に遭遇した：
1.は、ドロップダウンボックス後のマウスがそのようなドロップダウンナビゲーションなど、隠さ表示するには、
他の要素、非表示にするには、ドロップダウンボックスをクリックし、ドロップダウンボックスが表示されます2.クリックマウス。
第一の方法は、実装が非常に簡単ですが、第二の方法は、そのため第二の問題には2つのソリューションをご紹介します、非常に頭痛です。

まず、クリック結合法の使用

---

jQueryのコード：

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

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

HTMLレイアウト：

短所：

• HTML文書は、このアプローチは、完全に所望の結果を達成されていない、停止バブリングに他の要素があります。

• 要素のいずれかをクリックして隠されたdiv要素をトリガするために必要とされている、このアプローチは非常に消費するリソースです。

アイデア：DIVは、入力テキストボックスなどのフォーカスプロパティとして持つことができるならば、この問題は解決されていません！

第二には、どのようにフォーカス属性のdivを持っています

増加のtabindex、変更のhtml次のように：

次のようにjQueryのは、言葉で表現しました：

---

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

利点：

• 小さなフットプリント

• 理解しやすい達成する方法

• 互換性